支持新行的JQuery工具提示

Question

我正在寻找一个轻量级的jquery插件,用于在用户将鼠标悬停在元素上时显示工具提示.我希望插件能够从title属性中获取内容,并且重要的是我可以创建新行.

任何帮助表示赞赏!

Answer 1

我通常使用醉意的.

你可以在tipsy中添加任何html元素,所以<br/>有效.

您只需要传递html选项:

$('#example-html').tipsy({html: true });

如果您不想使用该title属性来显示html(在这种情况下它不会验证),您可以使用该fallback选项.

$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'? <br/> yay !" });

这个醉意的网页上有更多的选项和例子.

Answer 2

在jQuery 1.9(jquery + jquery-ui)和标准的toolTip函数中使用这个:

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

然后在标题中你可以使用HTML
或.

例:

<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

Answer 3

此代码使标题标签中的br工作正常!

$(document).tooltip({
    content: function() {
        var element = $(this);
        return element.attr("title");
    }
});