Question

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

~~官方网站上有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;
}

或者在title属性中插入强硬换行符<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" );
}

<强> 1.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。

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>

Answer 4

这有效：

<强> 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

$(document).tooltip({
    content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});

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

4 个答案: