A tag for Html effect.

<Style type = "text/css">

DIV # qTip {
BORDER-RIGHT: # fff 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: # fff 1px solid; DISPLAY: none; PADDING-LEFT: 20px; FONT-SIZE: 12px; z-INDEX: 1000; BACKGROUND: # 1ea3de; PADDING-BOTTOM: 10px; BORDER-LEFT: # fff 1px solid; COLOR: # fff; LINE-HEIGHT: 170%; PADDING-TOP: 10px; BORDER-BOTTOM: # fff 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TEXT-ALIGN: left
}
</Style>
<A title = "helloworld" href = "#"> hello world </a>
<SCRIPT language = JavaScript type = text/JavaScript>
Var qTipTag = "";
Var qTipX =-30;
Var qTipY = 25;
Tooltip = {
Name: "qTip ",
OffsetX: qTipX,
OffsetY: qTipY,
Tip: null
}
Tooltip. init = function (){
Var tipNameSpaceURI = "http://www.w3.org/1999/xhtml ";
If (! TipContainerID) {var tipContainerID = "qTip ";}
Var tipContainer = document. getElementById (tipContainerID );
If (! TipContainer ){
TipContainer = document. createElementNS? Document. createElementNS (tipNameSpaceURI, "div"): document. createElement ("div ");
TipContainer. setAttribute ("id", tipContainerID );
Document. getElementsByTagName ("body"). item (0). appendChild (tipContainer );
}
If (! Document. getElementById) return;
This. tip = document. getElementById (this. name );
If (this. tip) document. onmousemove = function (evt) {tooltip. move (evt )};
Var a, sTitle;
Var anchors = document. getElementsByTagName (qTipTag );
For (var I = 0; I <anchors. length; I ++ ){
A = anchors [I];
STitle = a. getAttribute ("title ");
If (sTitle ){
A. setAttribute ("tiptitle", sTitle );
A. removeAttribute ("title ");
A. onmouseover = function () {tooltip. show (this. getAttribute ('tidtitle '))};
A. onmouseout = function () {tooltip. hide ()};
}
}
}
Tooltip. move = function (evt ){
Var x = 0, y = 0;
If (document. all) {// IE
X = (document.doc umentElement & document.doc umentElement. scrollLeft )? Document.doc umentElement. scrollLeft: document. body. scrollLeft;
Y = (document.doc umentElement & document.doc umentElement. scrollTop )? Document.doc umentElement. scrollTop: document. body. scrollTop;
X + = window. event. clientX;
Y + = window. event. clientY;
} Else {// Good Browsers
X = evt. pageX;
Y = evt. pageY;
}
This. tip. style. left = (x + this. offsetX) + "px ";
This. tip. style. top = (y + this. offsetY) + "px ";
}
Tooltip. show = function (text ){
If (! This. tip) return;
This. tip. innerHTML = text;
This. tip. style. display = "block ";
}
Tooltip. hide = function (){
If (! This. tip) return;
This. tip. innerHTML = "";
This. tip. style. display = "none ";
}
Window. onload = function (){
Tooltip. init ();
}
</SCRIPT>