This is my working code: http://jsfiddle.net/gvot4n1e/1/
Basically, I want to show a tooltip when the mouse goes over a certain place - thats working, but what is not working is that I cannot get it to split into multiple lines (it only displays on one line)
I have even tried (after searching) using the solution from here: newline in <td title="">
but it does not work :(
If you don't want to visit the working code at jsfiddle on top, here is the code:
$(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 })
});
});
