Tooltipster 基于 jQuery 和 HTML5 的工具提示插件
Tooltipster 是一个轻量级的 jQuery 插件，可轻松创建简洁清晰的 HTML5 工具提示，插件支持多个显示主题选择，多种可选的动画显示，能够兼容流行的浏览器。
Tooltipster 是一个强大的，灵活的 jQuery 插件使您能够轻松地创建语义，现代工具提示，增强 CSS 的编写能力，对于显示的能容，可以是纯文本的内容，也可以是图文排列的容器，甚至你可以通过 Ajax 动态加载弹出的内容。
兼容性
Tooltipster 能够兼容 Mozilla Firefox、Google Chrome、IE8+ 和其它浏览器，依赖于 jQuery 1.7+
使用方法
1、加载 jQuery 和 Tooltipster 插件文件
下载Tooltipster的插件文件，移动 tooltipster.css 和 jquery.tooltipster.min.js 到你的根目录的 CSS 和 JavaScript 文件夹中。接下来加载 jQuery 和包括 Tooltipster 的 CSS 和 JavaScript 文件的标签里面：
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script> <script src="js/jquery.tooltipster.min.js"></script>
2、设置你的 HTML 代码
为了 Tooltipster 能够正常的工作，我们首先需要添加 .tooltip 类（或其他类/意味着选择你想使用的）无论我们希望有一个工具提示。下一步，我们将设置这个元素的 title 属性，无论我们想要提示说。下面是几个例子：
添加工具提示到一个图片中
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
添加工具提示到一个链接中，链接中已有其它的样式
<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>
给一个DIV容器添加工具提示
<div class="tooltip" title="This is my div's tooltip message!"> This div has a tooltip when you hover over it! </div>
3、调用Tooltipster方法
我们要做的最后一件事就是激活这个插件。为此，添加下面的脚本就在你关闭< /头>标签（使用任何选择你想在这种情况下，我们使用的.tooltip类）：
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>4、进一步的高级用法
在工具提示中使用HTML标签
Tooltipster允许你使用任何HTML标记你可以在你的工具提示。这意味着你可以插入图像和文本格式标签的东西。为了实现这一目标，推荐的方法是有一点不同：提供你的内容，而不是在标题属性脚本中的jQuery对象：
<head>
<script>
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
});
});
</script>
</head>
<body>
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
</body>另一个（不推荐）的方式实现这一目标是把编码的HTML标记直接在您的标题属性设置的contentAsHTML 选项为true。在所有的情况下，确保你有你想要的工具提示中显示内容的严格控制，多余的<script> 或者 <iframe>脚本标签例如会对你的网站的一个严重的安全问题。
<head>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
contentAsHTML: true
});
});
</script>
</head>
<body>
<div class="tooltip" title="<img src="my-image.png" /> <strong> This text is in bold case !</strong>">
This div has a tooltip with HTML when you hover over it!
</div>
</body>自定义工具提示样式
你Tooltipsters显示样式可以通过编辑/重写默认Tooltipster主题容易改变，位于css/tooltipster.css文件。
Tooltipster还包装有4种可供选择的主题选择。它们在本页的底部显示。使用一个主题，就包括CSS文件（位于css/themes文件夹）在你的页面并指定其名称在Tooltipster的设置：
$('.tooltip').tooltipster({
theme: 'tooltipster-noir'
});当然，你也有选择创造一个全新的主题，以满足您的需求。要做到这一点，开始与下面的例子，并添加您的天赋。当你完成了，包括指定您的主题，就像你的一个现有的主题Tooltipster。
/* This is how you would create a theme called "my-custom-theme": */
.my-custom-theme {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
.my-custom-theme .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}使用自定义函数和选项
Tooltipster 是选择给你一个广泛的变量来调整你的提示，你的心的内容。要了解更多关于所有选项，阅读选项部分。这里有一些你可以玩的东西：
$('.tooltip').tooltipster({
animation: 'fade',
delay: 200,
theme: 'tooltipster-default',
touchDevices: false,
trigger: 'hover'
});相关链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
插件不错，感谢分享！