轻量级jQuery工具提示插件tooltipsy使用方法

今天想给单位的系统弄一个提示插件,懒得自己做,于是就上网百度了几个jQuery插件,挺好用的。下面以tooltipsy插件为例,说明如何使用这些插件。

一、下载

  首先到tooltipsy的官网http://tooltipsy.com/下载插件tooltipsy.min.js。貌似官网下载有问题,我是从CSDN下载下来的。

二、安装

  在页面引入以下javaScript代码:

1 <script type="text/javascript" src="/path/to/tooltipsy.min.js"></script>

  当然,具体路径需要根据实际情况修改。

三、编写样式表

  在页面引入以下样式表代码:

1 <STYLE type="text/css">
2     .tooltipsy {
3         padding: 10px;
4         max-width: 200px;
5         color: #303030;
6         background-color: #f5f5b5;
7         border: 1px solid #deca7e;
8 }
9 </STYLE>        

  当然这仅仅是最简单的配置,如果有特殊需求,可以查阅官方文档进行相关修改。

四、使用

  在HTML部门中的元素,只要在元素属性中加入如下内容就可以使用了,例如:

1 <div>
2     <a class="hastip" title="看到提示了吧" >来摸我</a>
3 </div>

  将需要产生tip效果的元素的class属性设置为hastip,title属性设置为需要显示的语句。

  在页面中的显示如下:

 

  只要把鼠标移动到相关代码部分,就会弹出提示框。

 

  其他的插件使用方法大同小异

  更多的提示插件请看http://www.5icool.org/a/201209/710.html

posted @ 2014-04-22 09:57  Nickyhw  阅读(683)  评论(1编辑  收藏  举报