A good hyperlink mouse hover tip Css+js

Css|js| Links

hyperlink, the general practice is to give a title property, so that the user's mouse hover over the hyperlink, it will show the title of the content. But are you tired of the same mouse hover effect?
Of course, there are also very cool code, but only across the browser Kungfu is not enough, hehe. I met a good css, in IE and Firefox browsing the same effect.

The following figure is the effect of the actual operation:

The code is as follows:

/******************************************************

Dw_viewport.js
Version Date Nov 2003

This code was from Dynamic Web coding
At http://www.dyn-web.com/
Copyright 2003 by Sharon Paine
Terms of Use at http://www.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is retained in the code as is!

*******************************************************/

var viewport = {
Getwinwidth:function () {
this.width = 0;
if (window.innerwidth) this.width = window.innerwidth-18;
else if (document.documentelement && document.documentElement.clientWidth)
This.width = Document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth)
This.width = Document.body.clientWidth;
},

Getwinheight:function () {
this.height = 0;
if (window.innerheight) this.height = window.innerheight-18;
else if (document.documentelement && document.documentElement.clientHeight)
This.height = Document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight)
This.height = Document.body.clientHeight;
},

Getscrollx:function () {
THIS.SCROLLX = 0;
if (typeof Window.pagexoffset = = "Number") This.scrollx = Window.pagexoffset;
else if (document.documentelement && document.documentElement.scrollLeft)
THIS.SCROLLX = Document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft)
THIS.SCROLLX = Document.body.scrollLeft;
else if (window.scrollx) this.scrollx = WINDOW.SCROLLX;
},

Getscrolly:function () {
this.scrolly = 0;
if (typeof Window.pageyoffset = = "Number") this.scrolly = Window.pageyoffset;
else if (document.documentelement && document.documentElement.scrollTop)
this.scrolly = Document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop)
this.scrolly = Document.body.scrollTop;
else if (window.scrolly) this.scrolly = window.scrolly;
},

Getall:function () {
This.getwinwidth (); This.getwinheight ();
THIS.GETSCROLLX (); This.getscrolly ();
}

}

/****************************************************
Dw_event.js (version date Feb 2004)

This code is from Dynamic Web coding at http://www.dyn-web.com/
Terms of Use at http://www.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is retained in the code as is!
*******************************************************/

var dw_event = {

Add:function (obj, etype, FP, cap) {
Cap = Cap | | False
if (Obj.addeventlistener) Obj.addeventlistener (etype, FP, CAP);
else if (obj.attachevent) obj.attachevent ("on" + etype, FP);
},

Remove:function (obj, etype, FP, cap) {
Cap = Cap | | False
if (Obj.removeeventlistener) Obj.removeeventlistener (etype, FP, CAP);
else if (obj.detachevent) obj.detachevent ("on" + etype, FP);
},

Domit:function (e) {
E = e? E:window.event;
E.TGT = e.srcelement? E.srcelement:e.target;

if (!e.preventdefault) E.preventdefault = function () {return false;}
if (!e.stoppropagation) e.stoppropagation = function () {if (window.event) window.event.cancelBubble = true;}

return e;
}

}
/**************************************************
Dw_tooltip.js Requires:dw_event.js and Dw_viewport.js
Version Date:march 14, 2005
(minor changes in position algorithm and timer mechanism)

This code is from Dynamic Web coding at dyn-web.com
Copyright 2003-5 by Sharon Paine
Terms thewww.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is retained in the code as is!
*****************************************************/

var Tooltip = {
Followmouse:true,
Offx:8,
Offy:12,
Tipid: "Tipdiv",
SHOWDELAY:100,
HIDEDELAY:200,

Ready:false, Timer:null, Tip:null,

Init:function () {
if (document.createelement && document.body && typeof document.body.appendChild!= "undefined") {
if (!document.getelementbyid (this.tipid)) {
var el = document.createelement ("DIV");
El.id = This.tipid; Document.body.appendChild (EL);
}
This.ready = true;
}
},

Show:function (E, msg) {
if (This.timer) {cleartimeout (this.timer); this.timer = 0;}
This.tip = document.getElementById (this.tipid);
if (this.followmouse)//Set up MouseMove
Dw_event.add (document, "MouseMove", This.trackmouse, True);
This.writetip (""); For Mac IE
This.writetip (msg);
Viewport.getall ();
This.positiontip (e);
This.timer = settimeout ("Tooltip.togglevis" (' + this.tipid + "', ' visible ')", this.showdelay);
},

Writetip:function (msg) {
if (This.tip && typeof This.tip.innerHTML!= "undefined") This.tip.innerHTML = msg;
},

Positiontip:function (e) {
if (This.tip && this.tip.style) {
Put e.pagex/y first! (For Safari)
var x = E.pagex? E.pagex:e.clientx + viewport.scrollx;
var y = e.pagey? E.pagey:e.clienty + viewport.scrolly;

if (x + this.tip.offsetWidth + this.offx > viewport.width + viewport.scrollx) {
x = X-THIS.TIP.OFFSETWIDTH-THIS.OFFX;
if (x < 0) x = 0;
else x = x + this.offx;

if (y + this.tip.offsetHeight + this.offy > viewport.height + viewport.scrolly) {
y = Y-this.tip.offsetheight-this.offy;
if (Y < viewport.scrolly) y = viewport.height + viewport.scrolly-this.tip.offsetheight;
else y = y + this.offy;

This.tip.style.left = x + "px"; This.tip.style.top = y + "px";
}
},

Hide:function () {
if (This.timer) {cleartimeout (this.timer); this.timer = 0;}
This.timer = settimeout ("Tooltip.togglevis" (' + this.tipid + "', ' hidden ')", this.hidedelay);
if (this.followmouse)//release MouseMove
Dw_event.remove (document, "MouseMove", This.trackmouse, True);
This.tip = null;
},

Togglevis:function (ID, Vis) {//To check for El, prevent (rare) errors
var el = document.getElementById (ID);
if (el) el.style.visibility = Vis;
},

Trackmouse:function (e) {
E = dw_event. Domit (e);
Tooltip.positiontip (e);
}

}

Tooltip.init ();