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文件。
调用脚本如下:

  1. <script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
  2. <script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>

其次是tooltips效果的初始化:

  1. $('ul:last li.active').qtip({ //使用jquery的selector来指定触发源
  2. content: 'This is an active list element',
  3. show: 'mouseover',
  4. hide: 'mouseout'
  5. })

完成这两步之后,一个基础的tooltips效果就实现了。

另外,qtip的接口非常丰富,默认提供了几套主题,而且还可以自定义样式和位置,更详细的文档请看这里

Comments
One Response to “qtip轻松实现tooltips效果”
  1. 面经 says:

    很cool的效果哦

Leave A Comment

Bad Behavior has blocked 950 access attempts in the last 7 days.