28

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.

There is a demo on the official site.

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，其中位置代码已更新以更好地放置工具提示 - 请参阅http://api.jqueryui.com/tooltip/#期权头寸

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

4

5 回答 5

52

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

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

位置对象，特别是collision属性可以更改以强制将控件放置在其他位置。工具提示的默认值是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 之间更改了工具提示内容选项（根据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()

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

另外，请参阅jsFiddle 演示。

于 2012-10-25T12:45:57.847 回答
14

这是我用最新的 jquery / jqueryui 做的技巧

假设您想要工具提示的所有项目都具有类“jqtooltip”，它们具有标题标签，并且标题具有用于行分隔符的竖线字符。

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});
于 2013-04-18T20:40:20.663 回答
12

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

基本上，我们必须使用工具提示的内容调用来动态地从元素中获取数据。元素本身可以包含任何 html 标记。注意需要导入

所以，onload，我这样做：

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

我的示例元素是这样的：

<div title="first<br/>second<br/>">hover me</div>
于 2014-09-13T04:11:54.330 回答
2

这有效：

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"
    }
});
于 2013-04-15T21:13:22.037 回答
0

根据官方 jQuery UI 文档https://api.jqueryui.com/tooltip/的工具提示小部件（版本 1.13），我使用此语法设置带有换行符的 html 内容：

$( ".selector" ).tooltip( "option", "content", "1st line.<br />2nd line.<br />3rd line." );

它在我这边工作得很好。
也适用于 andyb这里提供的解决方案，旨在通过 title 属性的 value 来评估内容：

$('input').tooltip({
 content: function() {
    return $(this).attr('title');
 }
});
于 2021-10-18T20:42:46.493 回答