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

jQuery插件qTips是一个非常简单的小提示条工具，使用简单，效果图如下：
jQuery插件qTips实现简单tooltip小提示条
使用说明
需要使用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在线演示

共有0个回答