jQuery插件qTips实现简单tooltip小提示条

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

http://cgxcn.blog.163.com/blog/static/1323124220095475539298/

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

div.qtip-wrapper {
z-index: 999;
text-align: center;
position: absolute;
font-size: .9em;
width: 250px;
background: transparent url(arrow.png) no-repeat scroll center bottom;
color: #fff;
padding-bottom: 5px;
display: none
}

div.qtip-wrapper div {
background: #333 none;
padding: 5px;
font: normal normal .9em/1em "Arial", verdana, sans-serif;
}
使用实例
一，包含文件部分

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.qtips.js" type="text/javascript"></script>
二，HTML部分

<div class="box" style="left: 25px; top: 75px; width: 100px; height: 100px;">测试盒子1</div>
<div class="box" style="right: 135px; top: 165px; width: 75px; height: 75px;">测试盒子2</div>
<div class="box" style="left: 225px; top: 275px; width: 50px; height: 50px;">测试盒子3</div>
<div class="box" style="left: 625px; top: 575px; width: 25px; height: 25px;">测试盒子4</div>
四个实例，分别在网页不同地方显示小提示条

三，Javascript部分

<script type="text/javascript">
$(document).ready(function(){
$('div').qtip({content:'必优博客-技术源于实践，实践必然优秀! ', position:'center'});
});
</script>
Javascript部分指定需要显示提示条的对象并自定义提示内容和提示位置，实例中给所有DIV增加小提示功能。
注意有两个参数：
content表示提示文字内容
position表示提示位置

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

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

container: 'qtip',
content: '',
position: 'center',
nudge_top: 10,
nudge_left: 0,
preRender: function(e, tip){},
postRender: function(e, tip){},
onShow: function(e, tip){},
onHide: function(e, tip){},
解释如下：

container表示当前提示条容器名
content表示提示内容
position表示提示位置，可选center、left和right
nudge_top表示上微移
nudge_left表示左微移
preRender表示读取提示条前触发的函数
postRender表示读取提示条触发的函数
onShow表示显示提示条触发的函数
onHide表示隐藏提示条触发的函数
使用tips相比tooltip更加简单，两者都需要自定义提示条CSS样式，不过功能上tips比较单一，对于实现一个简单的提示条功能来说，jQuery插件qTips还是一个非常不错的选择。