javascript - 标题显示 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/'/>