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

有时候我们需要给链接或文字增加tooltip提示条功能，实现Javascript动态文字或图片提示效果，以增强页面元素的友好度，使用 jQuery插件tooltip提示条工具，不仅可以实现文字和图片提示条功能，还可以动态加载其它页面文件，丰富tooltip提示条的内容，而且使用 比较简单，一行代码即可实现，jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果图如下：
jquery_tooltip_sample
使用说明
需要使用jQuery库文件(目前版本1.3)和JQuery Magnify库文件

素材准备
CSS样式文件，增加提示条显示效果，便于jQuery插件tooltip提示条调用CSS样式，如：

  1. .tooltip-red
  2. {
  3. background-color: #FCE5CE;
  4. color: #F38F2A;
  5. padding:10px 10px 10px 10px;
  6. font-weight:bold;
  7. z-index:100;
  8. }
  9. .tooltip-blue
  10. {
  11. background-color: #5555FF;
  12. color: #FFFFFF;
  13. font-size:13px;
  14. font-family:verdana;
  15. border:solid 2px #0000FF;
  16. z-index:100;
  17. }

实例代码
一，包含文件部分
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>

二，HTML部分(链接提示)

  1. <div><a href="#" id="biuuu1" title="必优博客tooltip示例一" >示例一</a>: 简单的 tooltip 提条.</div><br/>
  2. <div><a href="ajax_biuuu.html" id="biuuu2"  >示例二</a>: 简单的 tooltip 提示条 ajax加载其它页面ajax_biuuu.html.</div><br/>
  3. <div><a href="#" id="biuuu3" title="必优博客tooltip示例三" >示例三</a>: delay:1000, opacity:50.</div><br/>
  4. <div style="float:right;"><a href="#" id="biuuu4" title="必优博客tooltip示例四" >示例四</a></div>

三，Javascript部分(jQuery插件tooltip提示条调用)

  1. $(document).ready(function() {
  2. $("#biuuu1").tooltip({cssClass:"tooltip-red"});
  3. $("#biuuu2").tooltip({cssClass:"tooltip-red"});
  4. $("#biuuu3").tooltip({cssClass:"tooltip-blue", delay:1000, opacity:50});
  5. $("#biuuu4").tooltip({cssClass:"tooltip-red", duration:2000, xOffset:30});
  6. });
  7. </script>

jQuery代码分析
一，$("#biuuu1").tooltip({cssClass:"tooltip-red"})部分
简单的tooltip提示条，提示文字在<a>的title里，定义了tooltip提示条的CSS样式，tooltip-red为前面定义的CSS样式，效果图如下：
jquery_tooltip_sample1
二，$("#biuuu2").tooltip({cssClass:"tooltip-red"})部分
简单的tooltip提示条，提示内容由ajax动态加载ajax_biuuu.html页面获取，效果图如下：
jquery_tooltip_sample2
三，$("#biuuu3").tooltip({cssClass:"tooltip-blue", delay:1000, opacity:50})部分
定义tooltip提示条隐蔽效果的延迟delay和不透明度opacity，效果图如下：
jquery_tooltip_sample3
四，$("#biuuu4").tooltip({cssClass:"tooltip-red", duration:2000, xOffset:30})部分
定义tooltip提示条持续时间duration和X坐标的offset值。效果图如下：
jquery_tooltip_sample4
使用jQuery插件tooltip提示条可实现丰富的提示效果，可自定义提示条CSS样式，透明度，持续时间等等，轻松实现Javascript动态文字或图片提示效果，而且可加载其它页面做为提示条的内容，非常值得推荐。

共有0个回答