必优博客

jQuery插件qTips是一个非常简单的小提示条工具，使用简单，效果图如下：

使用说明
需要使用jQuery库文件和qTips提示条库文件

自定义提示条样式，提示条样式名为qtip-wrapper(具体可查看qtips的JS文件)，示例如下：

1. div.qtip-wrapper {
2. z-index: 999;
3. text-align: center;
4. position: absolute;
5. font-size: .9em;
6. width: 250px;
7. background: transparent url(arrow.png) no-repeat scroll center bottom;
8. color: #fff;
9. padding-bottom: 5px;
10. display: none
11. }
13. div.qtip-wrapper div {
14. background: #333 none;
15. padding: 5px;
16. font: normal normal .9em/1em "Arial", verdana, sans-serif;
17. }

使用实例
一，包含文件部分

1. <script src="jquery.js" type="text/javascript"></script>
2. <script src="jquery.qtips.js" type="text/javascript"></script>

二，HTML部分

1. <div class="box" style="left: 25px; top: 75px; width: 100px; height: 100px;">测试盒子1</div>
2. <div class="box" style="right: 135px; top: 165px; width: 75px; height: 75px;">测试盒子2</div>
3. <div class="box" style="left: 225px; top: 275px; width: 50px; height: 50px;">测试盒子3</div>
4. <div class="box" style="left: 625px; top: 575px; width: 25px; height: 25px;">测试盒子4</div>

四个实例，分别在网页不同地方显示小提示条

三，Javascript部分

1. <script type="text/javascript">
2. $(document).ready(function(){
3. $('div').qtip({content:'必优博客-技术源于实践，实践必然优秀! ', position:'center'});
4. });
5. </script>

Javascript部分指定需要显示提示条的对象并自定义提示内容和提示位置，实例中给所有DIV增加小提示功能。
注意有两个参数：
content表示提示文字内容
position表示提示位置

使用qTips最主要的就是要清楚提示条的CSS样式以及显示的小图标，这些已存在下载的文件包中(arrow.png)，大家

可根椐需求进行适当的修改，另外tips还有几个参数，列表如下：

1. container: 'qtip',
2. content: '',
3. position: 'center',
4. nudge_top: 10,
5. nudge_left: 0,
6. preRender: function(e, tip){},
7. postRender: function(e, tip){},
8. onShow: function(e, tip){},
9. onHide: function(e, tip){},

解释如下：

1. container表示当前提示条容器名
2. content表示提示内容
3. position表示提示位置，可选center、left和right
4. nudge_top表示上微移
5. nudge_left表示左微移
6. preRender表示读取提示条前触发的函数
7. postRender表示读取提示条触发的函数
8. onShow表示显示提示条触发的函数
9. onHide表示隐藏提示条触发的函数

使用tips相比tooltip更加简单，两者都需要自定义提示条CSS样式，不过功能上tips比较单一，对于实现一个简单的提示条功能来说，jQuery插件qTips还是一个非常不错的选择。

点我查看jQuery插件qTips在线演示

相关文章：
jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果