jQuery Tooltip

Tooltip（工具提示）是鼠标悬停时在元素旁弹出的说明小气泡，用于解释按钮用途、缩写含义、表单字段要求。jQuery UI 的 tooltip 组件基于原生 title 属性即可工作，也支持完全自定义内容与位置，省去手写定位、延时、动画的麻烦。

1. 引入 jQuery UI

tooltip 属于 jQuery UI，引入 jQuery + jQuery UI 的 JS 与 CSS（CSS 提供气泡默认样式）：

<link href="https://example.com/jquery-ui.min.css" rel="stylesheet">

说明：示例中的 https://example.com 地址为占位域名，实际使用请替换为官方 CDN 或本地文件路径。
<script src="https://example.com/jquery.min.js"></script>
<script src="https://example.com/jquery-ui.min.js"></script>

2. 基于 title 的最小用法

HTML 写好 title，JS 一行初始化，即获得带定位与动画的提示气泡：

<button id="save" title="保存当前修改到服务器">保存</button>
<script>
$("#save").tooltip();
// 效果：鼠标悬停"保存"按钮时上方浮出 title 文字气泡，移开鼠标即消失
</script>

3. 自定义内容与触发元素

用 items 指定作用元素、content 返回任意内容（可含图片、链接等富文本）：

<a id="help" data-tip="点击可查看<span style='color:red'>帮助文档</span>">帮助</a>
<script>
$("#help").tooltip({
  items: "[data-tip]",              // 只对带 data-tip 的元素生效
  content: function () {
    return $(this).data("tip");     // 返回的自定义内容会按 HTML 渲染
  }
});
// 效果：悬停"帮助"链接时弹出带红色"帮助文档"字样的富文本气泡
</script>

4. 位置与延迟选项

选项	说明	示例
position	气泡相对目标元素的位置	{ my: "left+15 center", at: "right center" }
track	true 时气泡跟随鼠标移动	track: true
show / hide	出现 / 消失动画与延迟	show: { delay: 500 }

示例——气泡出现在输入框右侧，悬停半秒后才出现：

$("#age").tooltip({
  position: { my: "left+15 center", at: "right center" },
  show: { delay: 500 }
});
// 效果：鼠标悬停 0.5 秒后气泡从输入框右侧浮出，避免误触闪烁

5. 动态内容与最佳实践

• 在 document 上初始化即可事件委托，Ajax 后添加的元素自动获得气泡，无需重复绑定：$(document).tooltip();
• title 是可访问性属性，屏幕阅读器可读；自定义 content 的富文本气泡需额外提供等效文本；
• 气泡内容应精简，长说明文字应改放弹层或详情页，避免遮挡正文。

小结

一行 $("#el").tooltip() 即可获得带定位、延迟与动画的标准气泡；用 items + content 支持富文本，在 document 上初始化即可覆盖动态元素，这是手写悬停逻辑难以企及的省力之处。