ToolTip prompts plug-ins written by myself. The writing process is very serious. I hope you can support me and give me some comments. If you are interested, you can understand them, I hope this article will help you to continue to share a ToolTip plug-in that I wrote myself. I hope you can support me and give me some comments, even if you scold me, let me know that someone is following my "beans. Not much nonsense!
The Code is as follows:
$. Fn. ToolTip = function (option ){
Var defaults = {
Direction: "down ",
Star: function (){},
From: $ (this ),
Url: '../images/arrow.png'
};
// Basic variables in the Method
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 ';
// Start Traversal
$ (This). each (function (){
Var obj = $ (this );
Obj. on ({
Mouseenter: function (){
GetPos (obj );
Var objtip = $ ("
"Developer.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 = $ ("
"Developer.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 = $ ("
"Developer.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 ");
}
});
});
// Obtain the location
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 points to an error. You can modify it. A little problem ~
:
Of course, if there is anything in it, you have to create it by yourself. I just wrote a presentation p, which is easy to use.
Source code download
Operation instructions are an insult to the user experience teacher!
