jQuery UI Tooltip（工具提示框）实例
Tooltip 是 jQuery UI 中用于替换浏览器原生 title 提示的组件，支持 HTML 内容、动画、自定义位置、跟踪鼠标、AJAX 加载等。常用于表单验证提示、图片说明、链接帮助、图标解释等场景，比原生 title 更美观强大。
官方演示地址：https://jqueryui.com/tooltip/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础工具提示框
自动替换所有元素的 title 属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<p>鼠标悬停到这里查看提示：<a href="#" title="这是一个链接提示">链接</a></p>
<input type="text" title="请输入您的姓名">
<button title="点击提交表单">提交</button>
<script>
$(function() {
$(document).tooltip(); // 全局启用 tooltip
});
</script>
</body>
</html>2. 自定义内容（HTML 支持） + 位置调整
使用 content 函数自定义提示内容，支持 HTML。
<a href="#" id="custom-tooltip">悬停查看富文本提示</a>
<script>
$("#custom-tooltip").tooltip({
content: "<strong>标题</strong><br>这是<em>HTML</em>内容，支持<img src='https://via.placeholder.com/100x50' alt='图片'>",
position: { my: "left+15 center", at: "right center" }, // 位置调整
show: { effect: "fade", duration: 300 }, // 显示动画
hide: { effect: "explode", duration: 500 } // 隐藏动画
});
</script>3. 跟踪鼠标 + 指定元素
提示框跟随鼠标移动（track: true），或只对特定元素启用。
<input id="age" title="请输入18-100之间的年龄" placeholder="年龄">
<script>
$("#age").tooltip({
track: true, // 跟随鼠标
items: "input", // 只针对 input
tooltipClass: "custom-tip" // 自定义类，便于样式
});
</script>
<style>
.custom-tip { background: #ffeb3b; color: #333; border: 2px solid #ffc107; }
</style>4. 事件监听 + 动态内容
<a href="#" id="dynamic-tip" title="默认提示">动态提示</a>
<script>
$(document).tooltip({
open: function(event, ui) {
console.log("提示框打开");
},
close: function(event, ui) {
console.log("提示框关闭");
}
});
// 动态修改内容示例
// $("#dynamic-tip").tooltip("option", "content", "新内容");
</script>小技巧：
- 全局禁用 title 显示：初始化后自动移除原生 title，避免双重提示。
- AJAX 加载：
content: function() { return $.ajax({...}); } - 移动端：默认支持触摸长按显示。
- 自定义箭头：通过 CSS
.ui-tooltip::after添加。
Tooltip 适合提升用户体验，避免页面杂乱。如果你需要 表单验证提示、图片悬停大图预览、或 AJAX 动态加载内容 的完整示例，请提供更多细节！
