qtip轻松实现tooltips效果
最近发现了一个基于jquery的tooltips插件(来自于Craig Thompson的作品),名字很可爱,叫做qtip。看到它的时候,内心涌出了一丝惭愧,因为我在07年的时候就想基于jquery来开发一个这样的插件,但“明日复明日”,到了09年还没有动工,倒是发现人家已经发展得很不错了,只好用“站在巨人的肩膀上才能看得更远”来安慰自己了。

主页地址:http://craigsworks.com/projects/qtip/
由于我在博客最新版的主题中取消了以往的评论tooltips效果,所以打算使用qtip来代替(参照“最新留言”的效果)。
qtip的使用非常简单,几行代码就能实现出色的tooltips效果,下面我给大家介绍一下基础的用法。
首先是js文件的调用:
在qtip的下载包里面有两个主要的js文件,一个是jquery1.3.2版本的mini file,一个是插件自己的js文件。
调用脚本如下:
- <script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
- <script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>
其次是tooltips效果的初始化:
- $('ul:last li.active').qtip({ //使用jquery的selector来指定触发源
- content: 'This is an active list element',
- show: 'mouseover',
- hide: 'mouseout'
- })
完成这两步之后,一个基础的tooltips效果就实现了。
另外,qtip的接口非常丰富,默认提供了几套主题,而且还可以自定义样式和位置,更详细的文档请看这里。

很cool的效果哦