jquery - 如何在 jQueryUI 工具提示中换行

Question

新版本的 jQueryUI (1.9) 附带了 native 工具提示小部件。经过测试，如果内容(标题属性的值)很短，它就可以正常工作。但如果内容很长，工具提示一旦显示就会与输入文本重叠。

有 a demo在官方网站上。

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

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

我重新创建了一个 demo of the original problem on jsFiddle .

Answer 1

placement工具提示的大小由 jQueryUI Position 对象控制，默认设置为:

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

Position对象，特别是 collision可以更改属性以强制将控件放置在其他位置。工具提示的默认值是flipfit，这意味着如果默认值(右侧)不适合，它将向左翻转并尝试该位置，如果不合适与任何物体发生碰撞，请尝试将控件移离窗口边缘来适应控件。结果是它现在与 <input> 发生冲突。 。似乎没有一个选项可以强制长工具提示巧妙地换行。

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

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

JavaScript

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

CSS

.tooltip {
    max-width:256px;
}

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

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

编辑: 所以看起来 jQueryUI 更改了 v1.9 和 v1.10 之间的工具提示 内容 选项(根据 the changelog )。以下是差异供引用:

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

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

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

另请参阅jsFiddle demo .