在網上看到了這樣的效果：當鼠標移到某一個超鏈接上的時候，彈出一個自定義的提示。比ie自帶的那個好看得多。
不難實現(xiàn)，所以來試一試：
1.準備一個測試頁面。頁面上只有三個超級鏈接，為每個連接設置好title屬性。
<a href="#" title="1)LOOP…EXIT…END循環(huán)控制語句">1)LOOP…EXIT…END循環(huán)控制語句</a><br /><br />
<a href="#" title="2)WHILE…LOOP循環(huán)控制語句">2)WHILE…LOOP循環(huán)控制語句</a><br /><br />
<a href="#" title="3)FOR…LOOP循環(huán)控制語句">3)FOR…LOOP循環(huán)控制語句</a><br /><br />
2.一般情況我們會想到，為每一個<a>標記寫上onmouseover和onmouseout事件來控制tooltip的顯示與隱藏。
那么，有沒有一種方便的方法來做這件事情呢？
我們知道，從dom的角度來看網頁的話，所有的元素都是document下的子節(jié)點，所以我們可以通過循環(huán)的方式來為元素添加事件：
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隱藏
}
這是最初寫的代碼，運行后發(fā)現(xiàn)了問題，因為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;
}
接下來的思路是：當鼠標移上連接時，動態(tài)產生一個層，并把鏈接的title屬性的值賦給層。讓層在鼠標移動到的地方顯示。
function show(e){
tipContainer = document.createElement("div");
tipContainer.className = "qTip";
tipContainer.innerText = e;
tipContainer.style.top = event.offsetY + 15;不能直接讓鼠標出現(xiàn)在層上，所以要設置一定量的偏移。
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);
}
};