ToolTips JQEURY plug-in simple prompt box effect_jquery

Originally I wanted to use some ready-made plug-ins, but I found a few that were quite complicated. I just wanted to achieve a small effect that didn't need to be too complicated, so I finally planned to write one myself!

Implementation effect: Place the mouse on the text, and a small prompt box will appear!

Screenshot of the effect:

Test results: Firefox, IE6/7/8 are passed below That’s it! Expert advice is welcome!
　Code

Copy code The code is 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) ;

Usage:

Copy code The code is as follows:

$(document).ready(function(){
$("a").JNToolTips();
});