雖然IE也帶提示功能，只要給title屬性賦值，如下代碼?<a?href="http://chenxp2032.blog.163.com/blog/#"?title="this?a?test">自帶的提 示</a>這樣的提示很單調，鼠標移上去的時候顯示出來，當鼠標在上面移動的時候，提示信息不會跟隨，對比下面自定義的提示信息，差別就很明 顯，所以自定義的提示信息是很有必要的。
?方法一：
　　把鼠標放到鏈接上看提示信息如何定制提示信息，說起來很簡單，先畫出提示信息層，然后定位 到目標對象。下面把實現分三部來說明：

　　1）繪制信息層

　　有兩種方式，一種是靜態，把層的html代碼寫在文檔 中，另外一種是動態，運用javascript腳本動態的創建層。靜態方式簡單，不靈活，動態的靈活，但比較困難，需要熟悉腳本和Dom結構，下面的代碼 是動態方式創建提示層

　　function?createDivTooltip（）

　　{

　　 var?divTips?=?document.createElement（’div’）；//create?div?element

　 　divTips.id=’tooltip’；

　　divTips.style.display=’none’//invisible

　　document.body.appendChild（divTips）；

　　}

　　2）定 位信息層

　　function?locate（e）

　　{?e=e||window.event；

　 　var?divTips?=?document.getElementById（’tooltip’）；

　　 var?mousePos=getMousePosition（e）；//get?the?coordinate?of?the?mouse

　 　divTips.style.top=mousePos.top-12+"px"；

　　 divTips.style.left=mousePos.left-8+"px"；

　　}關于如何定位鼠標在文檔中的位置請參考《獲 取鼠標的坐標》

　　3）附加事件

　　 <a?href="http://chenxp2032.blog.163.com/blog/"?title="this?is?a?test?for?tooltip"?οnmοuseοver="showTooltip（event）；"?οnmοusemοve="locate（event）；"?οnmοuseοut="hideTooltip（event）；"& gt;click?to?do?something</a>上面代碼給一個鏈接添加了三個事件，onmouseover鼠標移到鏈接上的時候 顯示提示信息，onmousemove鼠標在鏈接上移動的時候提示信息跟隨，onmouseout鼠標移開鏈接時隱藏提示信息，雖然上面的代碼能夠實現功 能，但不是很好，因為需要為每個鏈接一一添加事件，而實際開發中一個頁面就會有很多鏈接，這樣就不方便，比較好的方法是下面代碼這樣實現

　 　function?prepare（id）

　　{

　　 if（id==null）?links=document.getElementsByTagName（"a"）；

　　 else?links=document.getElementById（id）。getElementsByTagName（"a"）；

　 　for（i=0；i<links.length；i++）{

　　attachEvent（links[i]）；

　 　}

　　}

　　function?attachEvent（link）

　　{

　 　if（！link）?return；

　　 link.attachEvent（"onmouseover"，showTooltip）；

　　 link.attachEvent（"onmousemove"，locate）；

　　 link.attachEvent（"onmouseout"，hideTooltip）；

　　}

　　完成上面的三 部簡單的自定義提示信息就完成啦，一些特別的提示信息是對創建的層做了特殊處理，如我們經常看到圓角提示信息，是在層上添加了背景圖片。

?方法二：

var div_xx = 0;
var div_yy = 0;
function keyd(divid){
?var obj = document.getElementById(divid);
?obj.style.cursor = "move";
?div_xx = event.clientX-obj.getBoundingClientRect().left;
?div_yy = event.clientY-obj.getBoundingClientRect().top;
?tow(obj);
}
function keyu(divid){
?var obj = document.getElementById(divid);
?window.document.onmousemove = null;
?obj.style.cursor = "default";
}
function tow(obj){
window.document.onmousemove = function(){
?modiv(obj);
};
}
function modiv(obj){
?obj.style.top = event.clientY+document.body.scrollTop-div_yy;
?obj.style.left = event.clientX+document.body.scrollLeft-div_xx;
}

?

在div 中的子元素中添加事件：

onMouseDown="keyd('divid')"

onMouseUp="keyu('divid')"

轉載于:https://www.cnblogs.com/liufei88866/archive/2010/12/23/1914487.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的DIV层跟随鼠标位置显示提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。