html风格tooltip效果的实现

网页上的图片如果设置了alt属性，当鼠标移经时就会有tooltip出现，但是只能显示一行文本，有时需要多行文本，乃至图片来显示图片、链接或者其它HTML元素的提示信息时，alt属性就无能为力了。

在本文提供了一种实现方案：为图片、链接等任意需要tooltip的HTML元素加上一个自定义的属性——"tooltip"，tooltip的值即为要显示的提示信息，可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加，比如<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!" ></img>，然后用下面讲述的 一段脚本，我已写成tooltip.js，实现对鼠标事件的捕获，即可实现HTML风格的tooltip。

tooltip的实现思想为获取需要显示TOOLTIP的元素的绝对位置，然后用一个DIV在鼠标位置显示其tooltip属性的值。以下是tooltip.js的代码和注释：

//为HTML容器增加TOOLTIP支持，参数e为你要添加的TOOLTIP支持的容器，如为document.body则为整个页面
//添加支持，如为某DIV则仅为该DIV中带有TOOLTIP属性的元素提供支持。
function addTipSupport(e) {
  e.onmouseover = showTip;
  e.onmouseout = hideTip;
  e.onmousemove = showTip;
}
 
//获得控件的绝对位置，返回左上角坐标
function getElePos(e){  
 var t=e.offsetTop; 
 var l=e.offsetLeft; 
 while(e=e.offsetParent){ 
 t+=e.offsetTop; 
 l+=e.offsetLeft; 
 } 
 
 return [l, t];
} 
//显示TOOLTIP
function showTip() { 
 getElePos(event.srcElement);
 if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
  altlayer.style.visibility='visible';
  var cord = getElePos(event.srcElement);
  altlayer.style.left=cord[0]+event.offsetX + 20;
  altlayer.style.top=cord[1]+event.offsetY+25;
  altlayer.innerHTML=event.srcElement.tooltip;
  altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
  }
  //else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
 altlayer.style.visibility = 'hidden';
}

本TOOLTIP的用法很简单，

（1）在</body>标签前加入以下代码：

<div style="visibility:hidden;border:2px groove orange;padding:5px;font-size:12px;background-color:#FFFFCC;position:absolute;"  id=altlayer></div>  //定义显示TOOLTIP的DIV风格
 <script type="text/javascript" src="tooltip.js"></script> //引入tooltip.js

上面的DIV的ID一定要与tooltip.js中的ID相对应，此处为altlayer ，style可以设置成自己的风格，因而可使TOOLTIP带有自定义的风格。

（2）为需要支持TOOLTIP的容器元素增加TOOLTIP支持，以实现对鼠标事件的捕获，则该容器内所有带有TOOLTIP属性的元素均可有TOOLTIP风格。可在任意时候包括页面已经装载后增加支持，用以下一句即可：

<script type="text/javascript">
<!--
addTipSupport(document.body);  //此处的参数可换成其它，以局限在某容器内支持TOOLTIP风格。
//-->
</script>

（3）为需要tooltip的HTML元素加上一个自定义的属性——"tooltip"，tooltip的值即为要显示的提示信息，可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加，比如

<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!<br><img src='sompic.jpg'/>" ></img>。

此TOOLTIP的优点在于可以设定只在相关的容器范围内支持TOOLTIP，以减少不必要的开销；用来显示TIP的DIV风格可以自己任意设定，TOOLTIP属性值可为任意HTML代码，因而风格是完全可定制的；代码易改动，可进一步改动为不同地方实现不同风格的TOOLTIP。