如何在jQueryUI工具提示中换行 [英] How to break line in jQueryUI tooltip

问题描述

新版本的jQueryUI(1.9)带有本机工具提示小部件.经过测试，如果内容(标题属性的值)较短，则可以正常工作.但是，如果内容很长，工具提示一旦显示，将与输入文本重叠.

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.

官方网站上有 演示 .

当您将鼠标光标悬停在您的年龄文本<input>上时，显示的工具提示将与文本输入重叠.我不确定这是否是小部件的期望行为. 我希望它停留在文本输入的右侧，并在必要时中断行.

When you hover the mouse cursor over the Your age text <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.

演示页面不再显示原始问题，因为该演示已更新为使用jQueryUI v1.10，其中 position 代码已更新到更好的位置工具提示-请参见 http://api.jqueryui.com/tooltip/#option-position

The demo page no longer shows the original problem since the demo has been updated to use jQueryUI v1.10 in which the position code was updated to better place the tooltip - see http://api.jqueryui.com/tooltip/#option-position

我已经在jsFiddle上重新创建了原始问题的演示.

I have re-created a demo of the original problem on jsFiddle.

推荐答案

展示位置工具提示的 由jQueryUI Position对象控制，默认设置为:

The placement of the tooltip is controlled by a jQueryUI Position object and the default settings are:

{ my: "left+15 center", at: "right center", collision: "flipfit" }

位置 对象，尤其是collision属性可以进行更改以强制将控件放置在其他位置.工具提示的默认值为 flipfit ，这意味着如果默认设置(右侧)不适合，它将向左 flip 并尝试该位置，如果不正确碰到任何东西，尝试通过将控件从窗口边缘移开来使其适合.结果是它现在与<input>发生冲突.似乎没有办法强制长工具提示巧妙地包装.

The Position Object, in particular the collision attribute can be changed to force placement of the control somewhere else. The default for tooltips is flipfit which means the if the default (on the right) does not fit it will flip to the left and try that position and if that doesn't collide with anything, try to fit the 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.

但是，有两种方法可以包装内容:

However there are two ways to wrap the content:

使用max-width将自定义CSS类添加到配置中以强制换行，例如:

Add a custom CSS class to the configuration with a max-width to force wrapping, for example:

JavaScript

JavaScript

$('input').tooltip({
    tooltipClass:'tooltip'
});

CSS

.tooltip {
    max-width:256px;
}

或在标题属性中插入硬换行符<br/>，例如

Or insert hard line-breaks <br/> in the title attribute, for example

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"

因此，jQueryUI似乎在v1.9和v1.10之间更改了工具提示 content 选项(根据

So it looks like jQueryUI changed the tooltip content option between v1.9 and v1.10 (according to the changelog). For reference here is the difference:

v1.9.2

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

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();
}

因此，您可以像这样使用.tooltip()来放回在 title 属性中无法转义<br/>标记的旧功能:

So you can put back the older functionality that does not escape <br/> tags in the title attribute by using the .tooltip() like this:

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

另外，请参见 jsFiddle演示 .

Also, see jsFiddle demo.

这篇关于如何在jQueryUI工具提示中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！