Continue to share a ToolTip plug-in 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!
Copy codeThe 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 = $ ("<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 ");
}
});
});
// 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 demonstration div, which is easy to use.
Source code download
Operation instructions are an insult to the user experience teacher!
