支持换行的 JQuery 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4491446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery tooltip that supports new line
提问by Nordis
I'm looking for a lightweight jquery plugin for displaying tooltips when the user hovers over an element. I would like the plugin to get the content from the title attribute and also it's important that I can make new lines.
我正在寻找一个轻量级的 jquery 插件，用于在用户将鼠标悬停在元素上时显示工具提示。我希望插件从 title 属性中获取内容，而且我可以创建新行也很重要。
Any help is appreciated!
任何帮助表示赞赏！
回答by Shikiryu
I usually use tipsy.
我通常使用醉意。
You can add any html element in tipsy, so <br/>works.
您可以在tipsy中添加任何html元素，这样就<br/>可以了。
You just need to pass the htmloption as such :
您只需要html像这样传递选项：
$('#example-html').tipsy({html: true });
If you don't want to use the titleattribute to display html (it won't validate in this case), you can use the fallbackoption.
如果您不想使用该title属性来显示 html（在这种情况下它不会验证），您可以使用该fallback选项。
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'? <br/> yay !" });
回答by adek
In jQuery 1.9 (jquery + jquery-ui) and standard toolTip function use this:
在 jQuery 1.9 (jquery + jquery-ui) 和标准 toolTip 函数中使用这个：
$(".myClass").tooltip({
content: function() {
return $(this).attr('title');
}
})
And then in the title you can use HTML's
or .
然后在标题中，您可以使用 HTML
或 .
Example:
例子：
<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>
回答by ex-q
This code makes br in title-tag work!
此代码使 br 在标题标签中起作用！
$(document).tooltip({
content: function() {
var element = $(this);
return element.attr("title");
}
});
回答by ITg
http://elliotlings.com/jquery/tooltipis a good tooltip to manage tooltips which need to hold more content
http://elliotlings.com/jquery/tooltip是一个很好的工具提示来管理需要容纳更多内容的工具提示
回答by Tomalak
Simple custom jQuery extension:
简单的自定义 jQuery 扩展：
$.fn.extend({
myToolTip: function() {
this.hover(
// mouse in ...
function () {
var $this = $(this);
if ($this.attr("title")) {
$this.data("$tooltip", $("<div class='myToolTip'></div>")
.text($this.attr("title"))
.html(function(i, html) { return html.replace(/\n/g, "<br/>"); })
.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();
}
);
}
});
This creates a <div class="myToolTip">(use CSS to style it) and positions it beneath the element in question on mouseenter. On mouseleavethe tooltip is removed again. Line breaks in the element's titlewill become <br>in the <div>'s contents, everything else will appear verbatim.
这将创建一个<div class="myToolTip">（使用 CSS 对其进行样式设置）并将其放置在mouseenter上的相关元素下方。在鼠标离开的工具提示再次删除。在元素的换行符title将成为<br>中<div>的内容，其他的一切都会逐字出现。
Call the extension via $(".someElements").myToolTip();.
通过 呼叫分机$(".someElements").myToolTip();。
回答by alex
Most browsers (not Firefox or Opera - newlines will disappear) support newlines in the titleattribute.
大多数浏览器（不是 Firefox 或 Opera -换行符将消失）在title属性中支持换行符。
If your plugin doesn't render them as <br />, do this on the text first...
如果您的插件没有将它们呈现为<br />，请先在文本上执行此操作...
var tooltip = $('#whatever').attr('title').replace(/\n/g, '<br />');
... and then pass tooltipto your tooltip library (e.g. qTip).
...然后传递tooltip给您的工具提示库（例如qTip）。
回答by ranobe
You can use this example:
你可以使用这个例子：
$(document).ready(function(){
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container : 'body',
html: true
});
});
});
After add html tag "
" inside title:
在
标题中添加html标签“ ”后：
title=text1<br/>text2
