替代方式（<br>等，<img>）

Question

我有这个问题，那就是：

我使用这个JavaScript代码。

$(document).ready(function() { 
$('.masterTooltip').hover(function(){ 
     // Hover over code 
     var title = $(this).attr('title'); 
     $(this).data('tipText', title).removeAttr('title'); 
     $('<p class="tooltip"></p>') 
     .text(title) 
     .appendTo('body') 
     .fadeIn('slow'); 
}, function() { 
     // Hover out code 
     $(this).attr('title', $(this).data('tipText')); 
     $('.tooltip').remove(); 
}).mousemove(function(e) { 
     var mousex = e.pageX + 20; //Get X coordinates 
     var mousey = e.pageY + 10; //Get Y coordinates 
     $('.tooltip') 
     .css({ top: mousey, left: mousex }) 
}); 
}); 

有：

echo "<img class='masterTooltip' title='Desc: <br> $xxx' id='xxx' width='50px' src='xx'/>"; 

但它显示了[BR]为[BR]没有突破到一个新的行，我需要使用[P]的另一种方式，[BR]等。

我知道它不能title属性中完成，但我不这么用JavaScript经验丰富，

因此，任何帮助将大大appericiated。

Answer 1

用.html(title)替换.text(title)。这会导致变量title的值被解析为HTML，而不是作为纯文本。

$(document).ready(function() { 
 
$('.masterTooltip').hover(function(){ 
 
     // Hover over code 
 
     var title = $(this).attr('title'); 
 
     $(this).data('tipText', title).removeAttr('title'); 
 
     $('<p class="tooltip"></p>') 
 
     .html(title) // THIS WAS CHANGED 
 
     .appendTo('body') 
 
     .fadeIn('slow'); 
 
}, function() { 
 
     // Hover out code 
 
     $(this).attr('title', $(this).data('tipText')); 
 
     $('.tooltip').remove(); 
 
}).mousemove(function(e) { 
 
     var mousex = e.pageX + 20; //Get X coordinates 
 
     var mousey = e.pageY + 10; //Get Y coordinates 
 
     $('.tooltip') 
 
     .css({ top: mousey, left: mousex }) 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class='masterTooltip' title='Desc: <br> $xxx' id='xxx' width='50px' src='http://lorempixel.com/50/50/'/>