Lightweight JS ToolTip prompt effect_javascript skills

The prompt effect that appears when the mouse passes is more beautiful than the title and can be customized.
JS:

Copy code The code is as follows:

//----- -----------------------tooltip effect start------------------------- ----------
//Get the position of an html element
function GetPos(obj){
var pos=new Object();
pos.x=obj .offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x =obj.offsetLeft;
pos.y =obj.offsetTop;
}
return pos;
};

//Tip Tool
var ToolTip={
_tipPanel:null,
Init:function(){
if (null==this._tipPanel){
var tempDiv=document.createElement("div");
document.body.insertBefore(tempDiv, document.body.childNodes[0]);
tempDiv. id="tipPanel";
tempDiv.style.display="none";
tempDiv.style.position="absolute";
tempDiv.style.zIndex="999";
}
},
AttachTip:function(){}, //Add tip binding
DetachTip:function(){}, //Remove tip binding
ShowTip:function(oTarget){
if($("tipPanel")==null)
return;

/*Operation process
*1. Build a new html fragment
*2. Set a new prompt box Position
*3, display prompt box
*/
//1.
var tempStr=""; //html fragment
if(arguments.length>1){
for(var i=1;itempStr ="

" arguments[i] "

";
}
}
$("tipPanel").innerHTML=tempStr;
//2.
var pos=GetPos(oTarget);
$("tipPanel").style.left=(oTarget.offsetWidth/2 pos .x) "px";
$("tipPanel").style.top=(oTarget.offsetHeight pos.y) "px";
//3.
$("tipPanel"). style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
return;
$("tipPanel") .style.display="none";
}
};

//------------------------ ---tooltip effectend-----------------------------------

CSS:

Copy code The code is as follows:

#tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;}
#tipPanel p{ margin:0px;}
#tipPanel b{ color:red; font- size:14px;}

HTML call:

Copy code The code is as follows:

Usage effect:

The above $("id") is equivalent to document.getElementById("id")
AttachTip:function(){}, //Add prompt binding
DetachTip:function(){} , //Remove the two lines of prompt binding
, which can be completed using dynamic binding events. Because they are not needed in the project, they are not added yet.