JSToolTip prompts the effect. For more information, see. The mouse prompts appear, more beautiful than the title, can be customized.
JS:
The Code is as follows:
// --------------------------- Tooltip effect start -----------------------------------
// Obtain the location 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;
};
// Prompt Tool
Var ToolTip = {
_ TipPanel: null,
Init: function (){
If (null = this. _ tipPanel ){
Var tempDiv = document. createElement ("p ");
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 a prompt for binding
DetachTip: function () {}, // The removal prompt is bound.
ShowTip: function (oTarget ){
If ($ ("tipPanel") = null)
Return;
/* Procedure
* 1. construct a new html clip.
* 2. Set a new location in the prompt box.
* 3. A prompt box is displayed.
*/
// 1.
Var tempStr = ""; // html clip
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 effect end -----------------------------------
CSS:
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:
The Code is as follows: