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

有时候需要对网页中的某些元素添加提示效果，以丰富信息内容，如链接中的title等，使用jQuery插件wTooltip可以实现窗口工具提 示，默认提示内容为title，可自定义提示内容与提示显示的CSS样式，效果图如下：

使用说明
需要使用jQuery库文件和wTooltip库文件

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

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

二，HTML部分

1. <a title="link1" href="#">link1</a>
2. <a title="link2" href="#">link2</a>
3. <a title="link3" href="#">link3</a>

三，Javascript部分

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $("a").wTooltip();
4. });
5. </script>

直接使用wTooltip插件作用于需要提示效果的元素，使用非常简单。

wTooltip插件其它使用
一，自定义提示内容

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

参数content表示自定义提示内容

二，自定义提示窗口样式

1. $("#block2 p").wTooltip({
2. content: "必优博客",
3. style: {
4. border: "2px solid green",
5. background: "blue",
6. color: "white",
7. fontWeight: "bold"
8. }
9. });

参数style表示自定样提示工具CSS样式
同时提供className参数，定义CSS类名

三，使用ajax调用远程提示

1. $("#block-whatever p").wTooltip({
2. content: "必优博客",
3. ajax: "http://www.biuuu.com/?query=fun"
4. });

wTooltip插件使用简单，大家可参考tooltip插件，了解相关知识。

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