分享一個(gè)我自己寫的ToolTip提示插件(附源碼)

更新時(shí)間：2013年01月20日 10:30:46 作者：

自己寫的 ToolTip提示插件,書寫過程很認(rèn)真的,希望大家支持我，給我點(diǎn)評(píng)論,感興趣的朋友可以了解下哦，希望本文對(duì)你有所幫助

繼續(xù)分享一個(gè)我自己寫的 ToolTip提示插件，希望大家支持我，給我點(diǎn)評(píng)論，哪怕罵我的也好啊，讓我知道有人在關(guān)注我“小豆” 嘿嘿。廢話不多說上代碼！

 
$.fn.ToolTip = function (option) { 
var defaults = { 
direction: "down", 
star: function () { }, 
from: $(this), 
url: '../images/arrow.png' 
}; 
//方法內(nèi)基礎(chǔ)變量 
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(); 
} 
} 
} 