在网上看到了这样的效果：当鼠标移到某一个超链接上的时候，弹出一个自定义的提示。比ie自带的那个好看得多。
不难实现，所以来试一试：
1.准备一个测试页面。页面上只有三个超级链接，为每个连接设置好title属性。
<a href="#" title="1)LOOP…EXIT…END循环控制语句">1)LOOP…EXIT…END循环控制语句</a><br /><br />
<a href="#" title="2)WHILE…LOOP循环控制语句">2)WHILE…LOOP循环控制语句</a><br /><br />
<a href="#" title="3)FOR…LOOP循环控制语句">3)FOR…LOOP循环控制语句</a><br /><br />
2.一般情况我们会想到，为每一个<a>标记写上onmouseover和onmouseout事件来控制tooltip的显示与隐藏。
那么，有没有一种方便的方法来做这件事情呢？
我们知道，从dom的角度来看网页的话，所有的元素都是document下的子节点，所以我们可以通过循环的方式来为元素添加事件：
var allEles = document.all;
for(var i =0;i<allEles.length;i++){
allEles[i].onmouseover = function(){show(this.title)};//设置onmouseover，使我们自定义的tooltip显示
allEles[i].onmouseout = function(){hide()};设置onmouseout，使我们自定义的tooltip隐藏
}
这是最初写的代码，运行后发现了问题，因为document.all不仅会把页面上的三个<a>标记取出来还会把<br>等标记一起取出。所以要在设置事件前加上判断：
if(allEles[i].title!=""&&allEles[i].title!=undefined){}
3.加上事件后，我们就可以开始处理tooltip的显示了。
首先声明一个css类
.qTip{
padding: 3px;边距=3
border: 1px solid gray;边框：1像素宽的灰色单线边框
border-right-width: 2px;
border-bottom-width: 2px;右边和下边的边框宽度设为2
color: #349045;字色为某种绿
background-color:#ffffff;背景为白色，可以试试不写着一行，会产生很奇特的效果。
font-size:12px;字体12像素
position: absolute;定位=绝对定位
z-index: 1000;
}
接下来的思路是：当鼠标移上连接时，动态产生一个层，并把链接的title属性的值赋给层。让层在鼠标移动到的地方显示。
function show(e){
tipContainer = document.createElement("div");
tipContainer.className = "qTip";
tipContainer.innerText = e;
tipContainer.style.top = event.offsetY + 15;不能直接让鼠标出现在层上，所以要设置一定量的偏移。
tipContainer.style.left = event.offsetX + 15;
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
};
同样，隐藏层：
把tipContainer从文档流中删除。
function hide(){
if(tipContainer!=null){
document.getElementsByTagName("body").item(0).removeChild(tipContainer);
}
};