如何在jQueryUI工具提示中断行

新版本的jQueryUI(1.9)自带的工具提示小部件。在测试之后，如果内容(标题属性的值)很短，它工作正常。但是如果内容很长，工具提示一旦显示，将与输入文本重叠。

官方网站上有a demo。

当您将鼠标光标悬停在您的年龄文本< input&gt，上时，显示的工具提示与文本输入重叠。我不知道这是否是所需的小部件的行为。
我想它留在文本输入的右侧和断开线如果必要。

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

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

解决方法

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

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

Position对象，特别是碰撞属性可以改变为强制将控件放置在其他地方。工具提示的默认值是flipfit，这意味着如果默认值(右边)不匹配，它将向左翻转并尝试该位置，如果没有碰到任何东西，尝试通过将控件移动远离窗口的边缘。结果是它现在与< input>冲突。似乎没有一个选项强制一个长工具提示巧妙地包装。

但是，有两种方法来封装内容：

将自定义CSS类添加到具有max-width的配置中以强制包装，例如：

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 />标签在title属性中使用.tooltip()就像这样：

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

另见，jsFiddle demo。

如何在jQueryUI工具提示中断行

解决方法

猜你在找的jQuery相关文章