jQueryUI (1.9) 的新版本带有原生的工具提示小部件。用它测试后，如果内容（标题属性的值）很短，它就可以正常工作。但是如果内容很长，工具提示一旦显示就会覆盖输入文本。
官网有a demo。
当您将鼠标光标悬停在 您的年龄 文本 <input> 上时，显示的工具提示会与文本输入重叠。我不确定这是否是小部件的期望行为。
我希望它保留在文本输入的右侧并在必要时换行。
编辑：演示页面不再显示原始问题，因为演示已更新为使用 jQueryUI v1.10，其中 position 代码已更新到更好的位置工具提示 - 见http://api.jqueryui.com/tooltip/#option-position
【问题讨论】：
工具提示的placement 由一个jQueryUI Position 对象控制，默认设置为：
{ my: "left+15 center", at: "right center", collision: "flipfit" }
Position 对象，特别是collision 属性可以更改以强制将控件放置在其他位置。工具提示的默认值为 flipfit，这意味着如果默认值（右侧）不适合它将 flip 向左并尝试该位置，如果不适合与任何东西发生碰撞，尝试通过将控件从窗口边缘移开来适应。结果是它现在与<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 之间更改了工具提示 content 选项（根据 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();
}
因此，您可以像这样使用.tooltip() 将不会在title 属性中转义<br/> 标记的旧功能放回原处：
$('input').tooltip({
content: function() {
return $(this).attr('title');
}
});
另外，请参阅jsFiddle demo。
【讨论】：
<br/> 一起使用jQuery v1.9.1 和jQueryUI v1.9.2
这是我用最新的 jquery / jqueryui 做的技巧
假设您想要工具提示的所有项目都具有类“jqtooltip”，它们具有标题标签，并且标题具有用于行分隔符的竖线字符。
$('.jqtooltip').tooltip({
content: function(callback) {
callback($(this).prop('title').replace('|', '<br />'));
}
});
【讨论】：
replace(/\|/g, '<br />')
我有一个 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>
【讨论】：
v1.11.4 和 JQuery v1.10.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"
}
});
【讨论】：
根据 jQuery UI 的官方文档 https://api.jqueryui.com/tooltip/ 的工具提示小部件（版本 1.13），我使用此语法设置带有换行符的 html 内容：
$( ".selector" ).tooltip( "option", "content", "1st line.<br />2nd line.<br />3rd line." );
对我来说效果很好。
也适用于 andyb here 提供的解决方案，旨在通过标题属性的值来评估内容：
$('input').tooltip({
content: function() {
return $(this).attr('title');
}
});
【讨论】：