jquery - newline in title tooltip

Question

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 })
});
});

Answer 1

Add style white-space: pre-line; to the tooltip class

Updated fiddle http://jsfiddle.net/s2dthLs5/