分享一个我自己写的ToolTip提示插件(附源码)

继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！

$.fn.ToolTip = function (option) { 
var defaults = { 
direction: "down", 
star: function () { }, 
from: $(this), 
url: '../images/arrow.png' 
}; 
//方法内基础变量 
var opt = $.extend(defaults, option), 
dirarray = ['up', 'down', 'left', 'right'], 
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0'; 
//开始遍历 
$(this).each(function () { 
var obj = $(this); 
obj.on({ 
mouseenter: function () { 
GetPos(obj); 
var objtip = $("<div class='tooltip'></div>").css({ 
position: "absolute", 
top: top, 
left: left, 
border: "solid 1px #ccc", 
width: $("#" + obj.attr("data-tooltip")).outerWidth(true), 
height: $("#" + obj.attr("data-tooltip")).outerHeight(true), 
'border-radius': '8px 8px', 
'background-color': '#fff', 
'z-index': 999 
}).appendTo(obj); 
var objtiphead = $("<div></div>").css({ 
width: arrow_w == 30 ? objtip.outerWidth(true) : 15, 
height: arrow_h == 30 ? objtip.outerHeight(true) : 15, 
position: "absolute", 
top: _top, 
left: _left 
}).appendTo(objtip); 
var objtiparrow = $("<div></div>").css({ 
width: arrow_w, 
height: arrow_h, 
"background-image": "url(" + opt.url + ")", 
"background-repeat": "no-repeat", 
"background-position": arrow 
}).appendTo(objtiphead); 
objtip.append($("#" + obj.attr("data-tooltip")).clone().show()); 
objtip.on({ 
mouseenter: function () { 
obj.data({ 
attip: true 
}); 
}, mouseleave: function () { 
$(".tooltip").remove(); 
obj.removeData("attip"); 
} 
}); 
} 
, mouseleave: function () { 
if (!obj.data("attip")) 
$(".tooltip").remove(); 
obj.removeData("attip"); 
} 
}); 
}); 
//得出位置 
var GetPos = function (obj) { 
var objtip = $("#" + obj.attr("data-tooltip")); 
var tooltippos = { 
up: function () { 
arrow_w = 30; arrow_h = 15; 
top = obj.position().top - 12 - objtip.outerHeight(true); 
left = obj.position().left; 
_top = objtip.outerHeight(true); 
_left = 15; 
arrow = '-50px -50px'; 
}, 
down: function () { 
arrow_w = 30; arrow_h = 15; 
top = obj.position().top + 12 + obj.height(); 
left = obj.position().left; 
_top = -15; 
_left = 15; 
arrow = '-50px 0'; 
}, 
right: function () { 
arrow_w = 15; 
arrow_h = 30; 
top = obj.position().top; 
left = obj.position().left - 12 - objtip.outerWidth(true); 
_top = 15; 
_left = objtip.outerWidth(true); 
arrow = '-80px -20px'; 
}, 
left: function () { 
arrow_w = 15; 
arrow_h = 30; 
top = obj.position().top; 
left = obj.position().left + obj.width() + 12; 
_top = 15; 
_left = -15; 
arrow = '0 -20px'; 
} 
}; 
opt.star(); 
opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down"; 
switch (opt.direction) { 
case "up": 
if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0) 
tooltippos.up(); 
else 
tooltippos.down(); 
break; 
case "down": 
if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height()) 
tooltippos.down(); 
else 
tooltippos.up(); 
break; 
case "right": 
if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0) 
tooltippos.right(); 
else 
tooltippos.left(); 
break; 
case "left": 
if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width()) 
tooltippos.left(); 
else 
tooltippos.right(); 
} 
} 
}

经测试，好像IE7 箭头有指向错误，大家可以修改下。小问题啦，洒洒水啦~
效果图：



当然，里面是什么内容，那就要自己创造了，我只是写了一个展示div，用法很简单的。
源码下载
操作说明是对用户体验师的侮辱！