如何在jQueryUI工具提示中打破行

Question

新版本的jQueryUI(1.9)附带了原生工具提示小部件.用它测试后,如果内容(title属性的值)很短,它就可以正常工作.但是如果内容很长,工具提示一旦显示,就会与输入文本重叠.

官方网站上有一个演示.

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

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

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

Answer 1

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

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

该位置的对象,尤其是collision属性是可以改变的,强制控制其他地方的位置.工具提示的默认值是flipfit,这意味着如果默认(在右侧)不适合它将向左翻转并尝试该位置,如果不与任何东西碰撞,请尝试通过将控件移离控件来适应控件窗户的边缘.结果是它现在碰撞了<input>.似乎没有强制长工具提示巧妙地换行的选项.

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

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

JavaScript的

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

CSS

.tooltip {
    max-width:256px;
}

或者<br/>在title属性中插入硬换行符,例如

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

编辑:所以看起来jQueryUI改变了v1.9和v1.10之间的工具提示内容选项(根据更改日志).这里参考的区别是:

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

因此,您可以使用以下命令放回title属性中不转义<br/>标记的旧功能:.tooltip()

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

另外,请参阅jsFiddle演示.

Answer 2

这是我用最新的jquery/jqueryui做的诀窍

假设您想要具有工具提示的所有项目都具有类"jqtooltip",它们具有标题标记,并且标题具有行分隔符的管道字符.

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});

Answer 3

我有一个jQuery 2.1.1的解决方案,类似于@ Taru的解决方案.

基本上,我们必须使用tooltip的内容调用来动态地从元素中获取数据.元素本身可以包含任何html标记.请注意,您需要导入

所以,onload,我这样做:

$(function() {
    $( document ).tooltip({
      content:function(){
        return this.getAttribute("title");
      }
    });
  });

我的示例元素是这样的:

<div title="first<br/>second<br/>">hover me</div>