yitip—jquery工具提示插件

 

demo

一、引入jquery库和yitip的js及其css

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.yitip.js"></script>
<link rel="stylesheet" type="text/css" href="style/css/base.css" />
<link rel="stylesheet" type="text/css" href="style/css/jquery.yitip.css" />

二、创建如下的html结构

<h2><a href="http://www.36ria.com/" title="这款的插件名为yitip">默认提示框</a></h2>

如果你想要改变提示框颜色可以加color属性（默认为黄色）：

<h2><a href="http://www.36ria.com/" title="这款的插件名为yitip" color="blue">默认提示框</a></h2>

三、初始化插件

$('[title]').yitip();

四、获取插件API

比如你有如下目标元素：

<a href="http://www.36ria.com/" title="yitip的作者为明河共影" id="demo3-title">demo3：这是第三个标题</a>

初始化插件后，按如下代码获取API：

var demo3Tip = $("#demo3-title").yitip("api");
    demo3Tip.options.offest = {"left":10,"top":0};
    demo3Tip.setPosition("rightMiddle");

这里重新设置该目标元素的提示框的位置。

五、配置参数详解

六、作者结语

yitip目前在IE下效果存在瑕疵，尤其是在IE8以下版本的IE浏览器，所以IE8以下明河做了特殊处理，没有开启偏移。日后明河将会予以修正，目前yitip的位置设置只有4个，下个版本，明河将更新左、右、上、下。