jQuery插件wTooltip弹出小窗口提示效果

有时候需要对网页中的某些元素添加提示效果,以丰富信息内容,如链接中的title等,使用jQuery插件wTooltip可以实现窗口工具提示,默认提示内容为title,可自定义提示内容与提示显示的CSS样式
使用说明
需要使用jQuery库文件wTooltip库文件
使用实例
一,包含文件部分
 

  • <script type="text/javascript" src="jquery.js"></script>
  • <script type="text/javascript" src="wtooltip.js"></script>

二,HTML部分
 

  • <a title="link1" href="#">link1</a>
  • <a title="link2" href="#">link2</a>
  • <a title="link3" href="#">link3</a>

三,Javascript部分
 

  • <script type="text/javascript">
  • $(document).ready(function() {
  • $("a").wTooltip();
  • });
  • </script>

直接使用wTooltip插件作用于需要提示效果的元素,使用非常简单。
wTooltip插件其它使用
一,自定义提示内容
 

  • $("a").wTooltip({content: "必优博客"});

参数content表示自定义提示内容
二,自定义提示窗口样式
 

  • $("#block2 p").wTooltip({
  • content: "必优博客",
  • style: {
  • border: "2px solid green",
  • background: "blue",
  • color: "white",
  • fontWeight: "bold"
  • }
  • });

参数style表示自定样提示工具CSS样式
同时提供className参数,定义CSS类名
三,使用ajax调用远程提示
 

  • $("#block-whatever p").wTooltip({
  • content: "必优博客",
  • ajax: "/my/location.php?query=fun"
  • });

wTooltip插件使用简单,大家可参考tooltip插件,了解相关知识。
点我查看jQuery插件wTooltip在线演示

上一篇: 多服务器的日志合并统计—apache日志的cronolog轮循   下一篇: Can't load bitmap 'exit.png' from resources! check .rc file

提交疑问

回顶部