Javascript jQuery 工具提示添加换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14599562/
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 add line break
提问by ChrisGP
So, I want to take the content of a div in which I have several <br/>, and then pass it as a title attribute using jQuery tooltip widget. I want the lines to appear one beneath the other inside the tooltip. thx. the code so far is:
因此，我想获取其中有多个 div 的内容<br/>，然后使用 jQuery 工具提示小部件将其作为标题属性传递。我希望线条在工具提示内出现在另一个下方。谢谢。到目前为止的代码是：
CSS
CSS
.Lines {
width: 125px;
height:20px;
overflow:auto;
}
JavaScript
JavaScript
$(function () {
$(document).tooltip();
$(".Lines").hover(function () {
IaTxt = $(this).html()
$(this).prop('title', IaTxt)
})
});
HTML
HTML
<div class="Lines">
First line.
<br/>Second line.
<br/>Third line!
<br/>Fourth line?
</div>
采纳答案by Teun Lassche
You can use the 'content' option of the tooltip widget. See also:
您可以使用工具提示小部件的“内容”选项。也可以看看：
http://jqueryui.com/tooltip/#custom-content
http://jqueryui.com/tooltip/#custom-content
Short example:
简短示例：
$(function() {
$( document ).tooltip({
content: function() {
return 'foo'
}
});
});
回答by zooglash
There's a pure CSS solution. Use \n for newlines, and add this CSS style:
有一个纯 CSS 解决方案。使用 \n 作为换行符，并添加以下 CSS 样式：
.ui-tooltip {
white-space: pre-line;
}
You can also use pre or pre-wrap instead of pre-line, if you want to preserve whitespace. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
如果您想保留空格，您还可以使用 pre 或 pre-wrap 而不是 pre-line。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
回答by Ravi Gadag
just use the entity for a linebreak in a title attribute.
只需将实体 用于标题属性中的换行符。
回答by Scott R. Frost
This is my trick to do it with latest jquery / jqueryui (assuming all of the items you want to have tooltips have class 'jqtooltip', they have title tags, and the title has a pipe character for a line separator:
这是我使用最新的 jquery / jqueryui 完成的技巧（假设您想要工具提示的所有项目都有类“jqtooltip”，它们有标题标签，并且标题有一个管道字符作为行分隔符：
$('.jqtooltip').tooltip({
content: function(callback) {
callback($(this).prop('title').replace('|', '<br />'));
}
});
回答by JDandChips
You could type your HTML directly into the Title attribute and then simply call the following:
你可以直接在 Title 属性中输入你的 HTML，然后简单地调用以下代码：
$(document).tooltip({
content: function (callback) {
callback($(this).prop('title'));
}
});
This way your HTML is rendered instead of escaped and literally written.
通过这种方式，您的 HTML 将被呈现而不是转义和字面书写。
回答by user3411211
better use this:
更好地使用这个：
$(document).tooltip({
content: function () {
return $( this ).prop( 'title' ).replace( '|', '<br />' );
}
});
with function(callback)i had an issue with tooltips which wasn't close
与function(callback)我有一个问题与不密切提示
回答by LukeP
I went with a modified version of ScottRFrost's answer. The problem with his example is that .replace only replaces the first instance of the character in the string. Here is a modified version that will use the regex's /g (global) to modify all instances of the character in the entire string.
我使用了 ScottRFrost 答案的修改版本。他的例子的问题是 .replace 只替换字符串中字符的第一个实例。这是一个修改版本，它将使用正则表达式的 /g（全局）来修改整个字符串中字符的所有实例。
$('.jqtooltip').tooltip({
content: function (callback) {
callback($(this).prop('title').replace(new RegExp("\|", "g"), '<br />'));
}
});
回答by Ronen Festinger
I used this:
我用过这个：
$("[title]").each(function(){
$(this).tooltip({ content: $(this).attr("title")});
});
It means all elements with a title attribute is going to use the jquery tooltip and the tooltip content will use the value of the title attribute. The content allows html.
这意味着所有具有 title 属性的元素都将使用 jquery 工具提示，工具提示内容将使用 title 属性的值。内容允许 html。
