几行简单代码实现DIV层上显示Tooltip效果
?最近在做一個(gè)項(xiàng)目，要在鼠標(biāo)移到層上后顯示出tip提示，網(wǎng)上找了半天，都很麻煩，就自己修改了一個(gè)，記錄在下面
測(cè)試在IE 7、8、9及 chrome 上沒(méi)問(wèn)題。
<HTML> <HEAD>
<title>Tooltip</title> <STYLE type="text/css">
body{
font-size:12px;
}
.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute ; background:#CCCCCC;}
.bd{
width:100px;?
padding:5px;
}
.top{
height:20px;
width:100px;
background-color:#333333;
color:#FFFFFF;
padding:5px;
}
</STYLE>
</HEAD>
<body>
<DIV class="dek" id="dek"></DIV>
<SCRIPT>
Xoffset=-20;
Yoffset= 20;???????
var nav,old,iex=(document.all),yyy=-1000;
if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}
if(!old)
{
var skn=(nav)?document.dek:dek.style;
if(nav)document.captureEvents(Event.MOUSEMOVE);
document.οnmοusemοve=get_mouse;
}
function popup(msg)
{
var content="<div class='top'>內(nèi)容提要</div><div width=100 class='bd'>"+msg+"</div>";
if(old){alert(msg);return;}?
else{yyy=Yoffset;
if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
}
}
function get_mouse(e)
{
var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
}
function kill()
{
if(!old){yyy=-1000;skn.visibility="hidden";}
}
</SCRIPT>
??? <span onMouseOver="popup('顯示的提示信息,顯示的提示信息!!!');" οnmοuseοut="kill();">普通文字上的效果
</span>
<div>
<img src="image4.jpg" onMouseOver="popup('顯示的提示信息,顯示的提示信息!!!');" οnmοuseοut="kill();"/>
<p>
?? 圖片上的效果
</p>
</div>
<div onMouseOver="popup('顯示的提示信息,顯示的提示信息!!!');" οnmοuseοut="kill();" class="top">
?? 層上的效果
</div>
</body>
</HTML>
?
?
總結(jié)
以上是生活随笔為你收集整理的几行简单代码实现DIV层上显示Tooltip效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 理解NodeJS
- 下一篇： Newtonsoft.Json 的序列化