JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" title="This will show up in the tooltip &#010;&#013; PPPPP Yay!" class="masterTooltip">Your Text</a>
<p title="Mouse over the heading above to view &#010;&#013; the tooltip." class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>
<img src="image.jpg" class="masterTooltip" title="Tooltip on image &#010;&#013; PPPPP newline!" />

CSS

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
    white-space: pre-line;
}

JavaScript

$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
    
   
         //title = str.replace("PPPPP", "\n");
    
    
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('1200');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 15; //Get X coordinates
        var mousey = e.pageY + -30; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});