数据恢复终极指南：TestDisk和PhotoRec如何拯救你的宝贵文件
2026/6/6 20:22:22
jQuery UI Tooltip（工具提示框）实例
Tooltip是 jQuery UI 中用于替换浏览器原生 title 提示的组件，支持 HTML 内容、动画、自定义位置、跟踪鼠标、AJAX 加载等。常用于表单验证提示、图片说明、链接帮助、图标解释等场景，比原生 title 更美观强大。
官方演示地址：https://jqueryui.com/tooltip/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础工具提示框
自动替换所有元素的 title 属性。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Tooltip 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><p>鼠标悬停到这里查看提示：<ahref="#"title="这是一个链接提示">链接</a></p><inputtype="text"title="请输入您的姓名"><buttontitle="点击提交表单">提交</button><script>$(function(){$(document).tooltip();// 全局启用 tooltip});</script></body></html>2.自定义内容（HTML 支持） + 位置调整
使用content函数自定义提示内容，支持 HTML。
<ahref="#"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），或只对特定元素启用。
<inputid="age"title="请输入18-100之间的年龄"placeholder="年龄"><script>$("#age").tooltip({track:true,// 跟随鼠标items:"input",// 只针对 inputtooltipClass:"custom-tip"// 自定义类，便于样式});</script><style>.custom-tip{background:#ffeb3b;color:#333;border:2px solid #ffc107;}</style>4.事件监听 + 动态内容
<ahref="#"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 动态加载内容的完整示例，请提供更多细节！