jQuery 如何在 jQueryUI 工具提示中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13066909/
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
How to break line in jQueryUI tooltip
提问by woraphol.j
The new version of jQueryUI (1.9) comes with the native tooltip widget. After testing with it, it works fine if the content (value of the title attribute) is short. But if the content is long, the tooltip, once displayed, will overlap the input text.
新版本的 jQueryUI (1.9) 带有本机工具提示小部件。用它测试后，如果内容（标题属性的值）很短，它就可以正常工作。但是如果内容很长，工具提示一旦显示就会与输入文本重叠。
There is a demoon the official site.
官网上有demo。
When you hover the mouse cursor over the Your agetext <input>, the tooltip displayed overlaps the text input. I am not sure if this is the desired behaviour of the widget.
I would like it to stay on the right side of the text input and break lines if necessary.
当您将鼠标光标悬停在您的年龄文本上时<input>，显示的工具提示会与文本输入重叠。我不确定这是否是小部件所需的行为。我希望它留在文本输入的右侧，并在必要时换行。
Edit:The demo page no longer shows the original problem since the demo has been updated to use jQueryUI v1.10 in which the positioncode was updated to better place the tooltip - see http://api.jqueryui.com/tooltip/#option-position
编辑：演示页面不再显示原始问题，因为演示已更新为使用 jQueryUI v1.10，其中更新了位置代码以更好地放置工具提示 - 请参阅http://api.jqueryui.com/tooltip/#期权头寸
I have re-created a demo of the original problem on jsFiddle.
我在 jsFiddle 上重新创建了原始问题的演示。
回答by andyb
The placementof the tooltip is controlled by a jQueryUI Position object and the default settings are:
工具提示的位置由 jQueryUI Position 对象控制，默认设置为：
{ my: "left+15 center", at: "right center", collision: "flipfit" }
The PositionObject, in particular the collisionattribute can be changed to force placement of the control somewhere else. The default for tooltips is flipfitwhich means the if the default (on the right) does not fit it will flipto the left and try that position and if that doesn't collide with anything, try to fitthe control by moving it away from the edge of the window. The result is that it now collides with the <input>. There doesn't seem to be an option to force a long tooltip to cleverly wrap.
该位置的对象，尤其是collision属性是可以改变的，强制控制其他地方的位置。工具提示的默认值是flipfit，这意味着如果默认值（右侧）不适合，它将向左翻转并尝试该位置，如果没有与任何内容发生冲突，请尝试通过将其移开来适合控件窗户的边缘。结果是它现在与<input>. 似乎没有一个选项可以强制长工具提示巧妙地换行。
However there are two ways to wrap the content:
但是有两种方法可以包装内容：
Add a custom CSS class to the configuration with a max-widthto force wrapping, for example:
将自定义 CSS 类添加到配置中max-width以强制包装，例如：
JavaScript
JavaScript
$('input').tooltip({
tooltipClass:'tooltip'
});
CSS
CSS
.tooltip {
max-width:256px;
}
Or insert hard line-breaks <br/>in the title attribute, for example
或者<br/>在 title 属性中插入硬换行符，例如
title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"
Edit:So it looks like jQueryUI changed the tooltip contentoption between v1.9 and v1.10 (according to the changelog). For reference here is the difference:
编辑：所以看起来 jQueryUI在 v1.9 和 v1.10 之间更改了工具提示内容选项（根据更改日志）。供参考，区别如下：
v1.9.2
v1.9.2
content: function() {
return $( this ).attr( "title" );
}
v1.10
v1.10
content: function() {
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
return $( "<a>" ).text( title ).html();
}
So you can put back the older functionality that does not escape <br/>tags in the titleattribute by using the .tooltip()like this:
因此，您可以通过使用以下内容来回退不会<br/>在title属性中转义标签的旧功能.tooltip()：
$('input').tooltip({
content: function() {
return $(this).attr('title');
}
});
Also, see jsFiddle demo.
另外，请参阅jsFiddle 演示。
回答by Scott R. Frost
This is my trick to do it with latest jquery / jqueryui
这是我用最新的 jquery/jqueryui 做到这一点的技巧
It's 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.
它假设您想要工具提示的所有项目都具有类“jqtooltip”，它们具有标题标签，并且标题具有用于行分隔符的管道字符。
$('.jqtooltip').tooltip({
content: function(callback) {
callback($(this).prop('title').replace('|', '<br />'));
}
});
回答by ivan-k
I have a solution for jQuery 2.1.1, similar to @Taru's solution.
我有一个 jQuery 2.1.1 的解决方案，类似于@Taru 的解决方案。
Basically, we have to use tooltip's content call to dynamically get the data from the element. The element itself can have any html markup in it. Note that you need to import
基本上，我们必须使用工具提示的内容调用来动态地从元素中获取数据。元素本身可以包含任何 html 标记。注意需要导入
So, onload, I do this:
所以，onload，我这样做：
$(function() {
$( document ).tooltip({
content:function(){
return this.getAttribute("title");
}
});
});
And my example element is this:
我的示例元素是这样的：
<div title="first<br/>second<br/>">hover me</div>
回答by Taru
This works:
这有效：
HTML
HTML
<div class="produtos">
<div class="produtos_imagem">
<img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descri??o: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/>
</div>
<p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p>
</div>
JavaScript
JavaScript
$(document).tooltip({
content: function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
},
position: {
my: "center bottom-20",
at: "center top"
}
});
