下面有demo的下载。样式能够本身调整CSS。
只须要在<a>标签里面加上 title=""
这个属性就是你所要在悬浮提示窗口里面显示的内容。
这个是从网络上收集到的。听说这个能够兼容目前的全部主流浏览器。
不过我的没有条件测试，只在IE8上没有问题（IE8的限制已经够恶心的了。其余应该问题不大）
若是哪位朋友发如今某个很恶心的破浏览器中不兼容。还请各位在这里回复一下，也好在其余朋友看的时候比较方便。
就先说这么说代码这里有，demo下面下载。。。。贫道和师太约会去了……
<style type="text/css"><!--div#qTip { padding: 3px; border: 1px solid #666; border-right-width: 2px; border-bottom-width: 2px; display: none; background: #999; color: #FFF; font: bold 9px Verdana, Arial, Helvetica, sans-serif; text-align: left; position: absolute; z-index: 1000;}a {color: #900;text-decoration: none;font-weight: bold;}a:hover {background: #900;color: #FFF;}hr {margin: 24px 0;_margin: 0;}--></style><script language="JavaScript" type="text/JavaScript">var qTipTag = "a"; 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('tiptitle'))}; a.onmouseout = function() {tooltip.hide()}; } }}tooltip.move = function (evt) { var x=0, y=0; if (document.all) {//IE x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.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>