一個頁面上往往有很多鏈接按鈕如果沒有任何提示信息會讓人很迷茫雖然IE也帶提示功能只要給title屬性賦值如下代碼 <a # title=this a test>自帶的提示</a>這樣的提示很單調鼠標移上去的時候顯示出來當鼠標在上面移動的時候提示信息不會跟隨對比下面自定義的提示信息差別就很明顯所以自定義的提示信息是很有必要的
把鼠標放到鏈接上看提示信息如何定制提示信息說起來很簡單先畫出提示信息層然後定位到目標對象下面把實現分三部來說明
）繪制信息層
有兩種方式一種是靜態把層的html代碼寫在文檔中另外一種是動態運用javascript腳本動態的創建層靜態方式簡單不靈活動態的靈活但比較困難需要熟悉腳本和Dom結構下面的代碼是動態方式創建提示層
function createDivTooltip（）
{
var divTips = documentcreateElement（div）//create div element
divTipsid=tooltip
divTipsstyledisplay=none//invisible
documentbodyappendChild（divTips）
}
）定位信息層
function locate（e）
{ e=e||windowevent
var divTips = documentgetElementById（tooltip）
var mousePos=getMousePosition（e）//get the coordinate of the mouse
divTipsstyletop=mousePostop+px
divTipsstyleleft=mousePosleft+px
}關於如何定位鼠標在文檔中的位置請參考《獲取鼠標的坐標》
）附加事件
<a this is a test for tooltip onmouseover=showTooltip（event） onmousemove=locate（event） onmouseout=hideTooltip（event）>click to do something</a>上面代碼給一個鏈接添加了三個事件onmouseover鼠標移到鏈接上的時候顯示提示信息onmousemove鼠標在鏈接上移動的時候提示信息跟隨onmouseout鼠標移開鏈接時隱藏提示信息雖然上面的代碼能夠實現功能但不是很好因為需要為每個鏈接一一添加事件而實際開發中一個頁面就會有很多鏈接這樣就不方便比較好的方法是下面代碼這樣實現
function prepare（id）
{
if（id==null） links=documentgetElementsByTagName（a）
else links=documentgetElementById（id）getElementsByTagName（a）
for（i=i<linkslengthi++）{
attachEvent（links[i]）
}
}
function attachEvent（link）
{
if（！link） return
linkattachEvent（onmouseovershowTooltip）
linkattachEvent（onmousemovelocate）
linkattachEvent（onmouseouthideTooltip）
}
完成上面的三部簡單的自定義提示信息就完成啦一些特別的提示信息是對創建的層做了特殊處理如我們經常看到圓角提示信息是在層上添加了背景圖片
From:http://tw.wingwit.com/Article/program/net/201311/13284.html
