1. 引入 jQuery 和 qTip2 插件：
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css" />
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
2. HTML 结构：
在需要显示 Tooltip 的元素上添加相应的属性。
<button id="myButton" title="Click me for a tooltip!">Hover me</button>
3. 初始化 qTip2 插件：
在页面加载完成后，使用 jQuery 选择器选中需要显示 Tooltip 的元素，并调用 qtip() 方法。
$(document).ready(function(){
$('#myButton').qtip({
content: {
text: 'This is a tooltip!'
}
});
});
在这个例子中，content 选项定义了 Tooltip 的文本内容。
4. 更复杂的示例：
<button id="myButton2">Hover me for a tooltip</button>
<script>
$(document).ready(function(){
$('#myButton2').qtip({
content: {
text: 'This is a more complex tooltip with <b>HTML</b> support.'
},
style: {
classes: 'qtip-bootstrap' // 使用 Bootstrap 样式
},
show: {
solo: true // 同一时间只显示一个 Tooltip
}
});
});
</script>
在这个例子中，style 选项指定了使用 Bootstrap 样式，而 show 选项设置了同一时间只显示一个 Tooltip。
qTip2 提供了丰富的选项，允许您自定义 Tooltip 的外观和行为。您可以根据需要查阅 [qTip2 文档](https://qtip2.com/options) 以了解更多选项和功能。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12911/jQuery