标题显示 html 标签的替代方式（<br> 等，<img>）答案

【问题标题】：Alternative way for title to display html tags(<br>,etc, <img>)标题显示 html 标签的替代方式（<br> 等，<img>）
【发布时间】：2015-01-20 14:01:03
【问题描述】：

我有这个问题是：

我正在使用这个 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 不是很有经验，

因此，我们将非常感谢任何帮助。

【问题讨论】：

欢迎来到 StackOverflow！请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”。
echo 语句应该是什么意思？如果用于生成 HTML 文档的技术是必不可少的，请用其名称标记问题；如果没有，只显示 HTML。

标签： javascript jquery html

【解决方案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/'/>

【讨论】：