Share a ToolTip prompt plug-in I wrote myself (with source code)_jquery

I will continue to share a ToolTip prompt plug-in I wrote myself. I hope everyone will support me and leave me comments, even if they scold me, let me know that someone is paying attention to me "Xiaodou" hehe. Without further ado, let’s talk about the code!

Copy code The code is as follows:

$.fn.ToolTip = function (option) {
var defaults = {
direction: "down",
star: function () { },
from: $(this),
url: '../images/arrow.png '
};
//Basic variables within the method
var opt = $.extend(defaults, option),
dirrray = ['up', 'down', 'left', 'right '],
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0';
//Start traversing
$ (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
}).appendTo(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");
}
});
});
//Get Position
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();
}
}
}

After testing, it seems that the IE7 arrow has a pointing error, you can modify it. Small problem, sprinkle some water~
Rendering:

Of course, you have to create the content yourself, I just wrote a display div , usage is very simple.
Source code download
The operation instructions are an insult to user experience engineers!