明河写yitip的灵感来自于 Tutorials写的Colortip ，明河上周曾以Colortip 为例详解了jquery插件开发，同时指出Colortip 的缺陷，于是明河对其进行了重构，写了这个新的插件，我将其命名为yitip。
使用教程
一、引入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");
这里重新设置该目标元素的提示框的位置。
（详见demo文件）
五、配置参数详解
|
参数 |
默认值 |
类型 |
描述 |
|
content |
null |
String | Object |
提示框的内容 当为Object时，获取远程数据，需要传入一个ajax配置参数 |
| position | "topMiddle" | String |
提示框位置 目前开放四个位置：上中、下中、左中、右中 |
| offest | {"left":0,"top":0} | Object | 提示框位置偏移 |
| color | "yellow" | String |
提示框颜色 目前共有6种颜色：：黄色、蓝色、绿色、红色、黑色、白色 |
| hideDelay | 500 | Number | 隐藏延迟 |
| showDelay | 0 | Number | 显示延迟 |
| showEvent | "mouseover" | String | 显示事件，设置为"click"，即单击目标元素才显示提示框 |
| hideEvent | "mouseout" | String | 隐藏事件，阻止隐藏事件，将此参数设置为null即可 |
| effect | Object |
提示框动画效果配置，默认为： { |
六、作者结语
yitip目前在IE下效果存在瑕疵，尤其是在IE8以下版本的IE浏览器，所以IE8以下明河做了特殊处理，没有开启偏移。日后明河将会予以修正，目前yitip的位置设置只有4个，下个版本，明河将更新左、右、上、下。
如果你有什么好的意见或发现了bug，欢迎给明河留言，谢谢！
我是代码小白.
呵呵所有的大鸟都是从小白开始的。
我也是代码小白
但是能大概看出来应该不错，明河大大能不能加个演示?
呵呵，页面里面不是有演示按钮吗：http://www.36ria.com/demo/yitip/
我看见演示了！今天情绪不好，也影响了视觉
小白路过.
明河大哥，我偶然发现你这个yitip插件一个CSS上的重大Bug，不知道你是否有在测试的过程中，放大缩小浏览器窗口，就是在浏览器窗口放大缩小的时候，浮动层的位置混乱了，而且各个浏览器的偏移有所不同，IE偏移最为严重，其次是火狐，谷歌浏览器，偏移和火狐差不多，还有就是在360浏览器下面没有效果。
顺便再这里提个建议，能否将这个插件的事件触发改得更加容易操作些。例如你Demo里面的Demo6的效果，感觉代码代码稍显沉重。
再顺便交个朋友：QQ：501783419 古木天琪
古木天琪，你好，非常感谢你的留言，你反馈的bug非常准确，的确存在，是我考虑不够周全，关于浏览器的偏移有所不同，是这样的因为IE下如果使用偏移会存在一些问题，所以不同的浏览器，我做了些区别。360浏览器下面没有效果…..360没测试过。至于你说的易用性问题，这点说的很好，在API上设置上有些东西的确没想清楚。呵呵，QQ我现在不常用，你可以加我的QQ：793588730，或加我的旺旺：剑平。感谢你的留言，下一个版本会修复你说的这些问题（下个版本没这么快发布，现在忙着写kissy方面的东西）。
比较严重的问题，ie6下测试演示页面（包括在线和下载到本机），看完演示6之后，再回头看前边的演示，尤其演示1或者演示2，完全没有效果，请检查。不知道是个例还是普遍情况。firefox有时能重现，ie6基本上是每次都能重现故障
@古博, 经过半个小时的测试，ie6问题下比较严重，firefox下正常。另外，jquery-1.4.2.min.js可不可以用google等提供的cdn加速，应该是一致的吧
非常感谢古博的测试，相当给力，的确在IE6下存在bug。一直没时间去修复。话说有可能的话将重构而不再修复。
@明河共影, 我在想要不要弄成wordpress插件 – -#
要不就先缓缓，等稳定下来再说吧。
这个好像做成wordpress插件，用处不大……
又来测试了一下 – -#
现在怎么firefox和chrome包括ie6下都会弹出两个提示，Orz，刷新之后还是这样
之前看的时候不是这样的，不知道是我记错了还是新出现的。我确实对这个感兴趣，对于一些注释来说还是你这个用户体验好。用页内锚的形式多了一个点击操作，而且定位也不清晰
呵呵，这个插件的确有待改正，细节还有待晚上，日后有时间了，就重构下。
想问个问题，我下载了您的插件，当我鼠标放入：(demo5：这是第五个标题)这里的时候，我想点击里面的内容，可鼠标离开标题，内容就隐藏了，可有方法？？？