ToolTips Jqeury plug-in simple small hint box effect _jquery

Originally want to use some ready-made plug-ins, find a few are more complex, I want to achieve a small effect, not need too complex, so finally intend to write one!

Implementation effect: The mouse put on top of the text, appear small hint box!

Screenshot of Effect:

Test results: Firefox, IE6/7/8 below through
Description, did not do the parameter customization, may be perfect later, we want to change the display effect, directly adjust the CSS style inside JS! Welcome to the Master advice!
Code

Copy Code code as follows:

(function ($) {
$.fn. Jntooltips=function () {
var div = document.createelement ("div");
Div.style.cssText = ' width:300px; line-height:25px; Border:solid 1px #F3A007; Background-color: #FBE6BD; padding:5px 10px; Font-size:12px;position:absolute '
Div.onclick=function () {$ (div). Remove ();};
$ (this). MouseOver (function (e) {
if (!e) {e=window.event;}
Div.innerhtml= $ (this). attr ("title");
$ (this). attr ("title", "");
var doc = document.documentelement? Document.documentElement:document.body;
div.style.left= (E.clientx+doc.scrollleft + 5) + "px";
div.style.top= (E.clienty+doc.scrolltop + 5) + "px";
Document.body.appendChild (DIV);
}). mouseout (function () {
$ (this). attr ("title", div.innerhtml);
$ (DIV). Remove ();
});
}
}) (JQuery);

How to use:

Copy Code code as follows:

$ (document). Ready (function () {
$ ("a"). Jntooltips ();
});