jQuery插件Tooltipster实现漂亮的工具提示
更新时间：2015年04月12日 11:14:37 投稿：hebedich
Tooltipster是一个jQuery插件用于快速创建HTML5校验并且灵活的Tooltips。它可以通过CSS来改变外观，箭头的位置之后，鼠标，延迟/期间的外观都可以被定义。
Tooltipster是一个轻量级的jQuery工具提示插件，可以快速的帮助你生成漂亮的工具提示。
1，加载jQuery和包括Tooltipster的插件文件
在您下载Tooltipster，移动tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目录。接下来，加载jQuery和包括您的标签里面Tooltipster的CSS和JavaScript文件：
<head> ... <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> ... </head>
2，设置你的HTML
为了Tooltipster工作，我们首先需要添加.tooltip类（或任何类别/选择意味着你想使用）的任何元素，我们希望有一个工具提示。接下来，我们将设置标题属性，无论我们希望我们的提示说。下面是一些例子：
添加工具提示的图像：
复制代码 代码如下:
<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
我们要做的最后一件事就是激活插件。要做到这一点，你的结束</ head>前才添加下面的脚本标签（使用任何选择你想 - 在这种情况下，我们使用的是.tooltip类）：
<head>
...
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>
</head>
总结：
1.工具提示支持HTML标签内容
2.轻量级
3.灵活高效
4.样式定义简单，100%的CSS
5.支持3种主题
6.支持firefox，Chrome，IE7/8/9，Opera，Safari
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
本文给大家分享的是一段使用jQuery实现支持IE的html滑动条代码，效果非常不错，这里推荐给大家，希望大家能够喜欢。2015-03-03
最近做一个项目，许多功能都是关于弹出框的，在做的过程中发现会有好多自己考虑不到的问题，下面以一个示例为大家详细介绍下，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下2017-05-05
公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题2010-04-04
这篇文章主要介绍了jQuery隐藏和显示效果实现的相关资料,需要的朋友可以参考下2016-04-04
我经常抱怨jQuery的DOM操作性能并不优秀，并且经常尝试用一些方法去进行优化，但是越是优化，越是沮丧地发现jQuery其实已经做得很好，从使用者的角度能够进行的优化实在有限2011-02-02
这篇文章主要介绍了jQuery实现花式轮播之圣诞节礼物传送效果,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇jQuery中each循环的跳出和结束实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
EXT体积大,jQuery更专注于简化最基础的开发工作.所以使用起来,也就感觉更像是使用原始的js进行开发一样2010-04-04
最新评论