jQuery 工具提示 - 标题换行符答案

【问题标题】：jQuery tool tip - Title line breakjQuery 工具提示 - 标题换行符
【发布时间】：2013-08-16 22:05:53
【问题描述】：

我正在使用这个 jQuery 插件在将鼠标悬停在文本和图片上时制作工具提示 http://www.alessioatzeni.com/wp-content/tutorials/jquery/simple-tooltip/index.html

问题是我不知道如何在标题标签中换行。

我看过其他人问同样的问题，所以我已经尝试了以下方法：

<br />
\n
&#13;


<a title='Tool
Tip
On
New
Line'>link with tip</a>

但以上方法都不适合我。

【问题讨论】：

标签： javascript jquery hover mouseevent jquery-hover

【解决方案1】：

所以您可能正在运行此代码（来自您问题中链接的站点）：

$(document).ready(function() {
    // Tooltip only Text
    $('.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 })
    });
});

请注意，它使用$('<p class="tooltip"></p>').text(title)。如果你把它改成.html(title)，你应该可以使用<br>。

http://jsfiddle.net/tugpM/

【讨论】：