Jquery-based custom mouse tip effects jquery. toolTip

IE Effect

Firefox or other browsers

Code

Copy codeThe Code is as follows: // copyright: www.kuchechina.com, China
// Author: zhuyue.cnblogs.com
// Demonstration http://www.kuchechina.com/carstools/Default.aspx
JQuery. fn. toolTip = function (){
This. unbind (). hover (
Function (e ){
This. t = this. title;
This. title = '';
$ ('Body '). append ('<p id = "p_toolTip" style = "display: none; max-width: 320px; text-align: left; "> '+ this. t + '</p> ');
Var tip = require ('p;p_tooltip'}.css ({"position": "absolute", "padding": "10px 5px 5px 10px", "left": "5px", "font-size ": "14px", "background-color": "white", "border": "1px solid # a6c9e2", "line-height": "160% ", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9999 "});
Var target = $ (this );
Var position = target. position ();
This. top = (position. top-8); this. left = (position. left + target. width () + 5 );
$ ('P # p_toolTip extends img_tooltip_arrow'}.css ({"position": "absolute", "top": "8px", "left": "-6px "});
Tip.css ({"top": this. top + "px", "left": this. left + "px "});
Tip. fadeIn ("slow ");
},
Function (){
This. title = this. t;
$ ("P # p_toolTip"). fadeOut ("slow"). remove ();
}
);
};

Usage:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Document). ready (function (){
$ ("# TootlsMain img [title]"). toolTip ();
});
</Script>

You can use the jquery selector to select a tag with the title attribute. Of course, you can modify the code to apply the tag with the alt attribute.
The title attribute supports simple html tags. For example, <br/>. Note the use of quotation marks
Implementation principle:
Use the label title attribute to replace the default mouse event with the hover event to display the floating layer. This. unbind (). hover is the code. Jquery helps us do a lot of things. Just pile up our real code.
Programmer, I hope you can understand it.

Code download