支持新行的JQuery工具提示

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

任何帮助表示赞赏！

Answer 1

我通常使用醉意的 。

---

你可以在tipsy中添加任何html元素，因此如工作。

你只需要传递html选项：

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

如果您不想使用title属性来显示html（在这种情况下它不会validation），您可以使用fallback选项。

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

这些醉意网页上有更多选项和示例 。

Answer 2

在jQuery 1.9（jquery + jquery-ui）和标准的toolTip函数中使用这个：

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

然后在标题中你可以使用HTML
要么 。

例：

 (?) 

Answer 3

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

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

Answer 4

http://elliotlings.com/jquery/tooltip是一个很好的工具提示，可以管理需要保存更多内容的工具提示

Answer 5

大多数浏览器（不是Firefox或Opera – 换行符将消失 ）支持title属性中的换行符。

如果您的插件没有将它们渲染为
，请先在文本上执行此操作…

 var tooltip = $('#whatever').attr('title').replace(/\n/g, '
'); 

…然后将tooltip传递到您的工具提示库（例如qTip ）。

Answer 6

简单的自定义jQuery扩展：

 $.fn.extend({ myToolTip: function() { this.hover( // mouse in ... function () { var $this = $(this); if ($this.attr("title")) { $this.data("$tooltip", $("
") .text($this.attr("title")) .html(function(i, html) { return html.replace(/\n/g, "
"); }) .css({ position: "absolute", top: $this.position().top + $this.outerHeight(), left: $this.position().left }) .appendTo("body") ); } }, // mouse out ... function () { var $tooltip = $(this).data("$tooltip"); if ($tooltip) $tooltip.remove(); } ); } }); 

这将创建一个

（使用CSS来设置样式）并将其放置在mouseenter上有问题的元素下面。 在mouseleave上 ，再次删除工具提示。 元素title中的换行符将成为

内容中的
，其他所有内容将逐字显示。

通过$(".someElements").myToolTip();调用扩展名$(".someElements").myToolTip(); 。

Answer 7

您可以使用此示例：

 $(document).ready(function(){ $(function () { $('[data-toggle="tooltip"]').tooltip({ container : 'body', html: true }); }); }); 

添加html标签后“
“内部标题：

 title=text1
text2