分享一個我自己寫的ToolTip提示外掛(附源碼)_jquery

繼續分享一個我自己寫的 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 = $("

").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 = $("

").css({
width: arrow_w == 30 ? objtip.outerWidth(true) : 15,
height: arrow_h == 30 ? objtip.outerHeight(true) : 15,
position: "absolute",
top: _top,
left: _left
).app. (objtip);
var objtiparrow = $("

").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.outobjtip. );
_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'
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
toolt break;
case "down":
if (obj[0].getBoundingClientRect().top 10 obj.height() objtip.outerHeight() 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() tooltippos.left();
else too.right() ;
}
}
}


測試，好像IE7 箭頭有指向錯誤，大家可以修改下。小問題啦，灑灑水啦~

效果圖
：
 當然，裡面是什麼內容，那就要自己創造了，我只是寫了一個展示div ，用法很簡單的。
原始碼下載

操作說明是對使用者體驗師的侮辱！