標題顯示html標簽的另一種方法（ <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不太了解，

因此，任何幫助都將得到極大的重視。

Answer 1

將.text(title)替換為.html(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/'/>