zoukankan      html  css  js  c++  java
  • 几行简单代码实现DIV层上显示Tooltip效果

     最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面

    测试在IE 7、8、9及 chrome 上没问题。

    <HTML> <HEAD>
    <title>Tooltip</title> <STYLE type="text/css">
    body{
    font-size:12px;
    }
    .dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute ; background:#CCCCCC;}
    .bd{
    100px; 
    padding:5px;
    }
    .top{
    height:20px;
    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.onmousemove=get_mouse;
    }

    function popup(msg)
    {
    var content="<div class='top'>内容提要</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('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();">普通文字上的效果
    </span>
    <div>
    <img src="image4.jpg" onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();"/>
    <p>
       图片上的效果
    </p>
    </div>
    <div onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();" class="top">
       层上的效果
    </div>
    </body>
    </HTML>

  • 相关阅读:
    阿里云乌班图16配置-PHP环境(包括mysql及apache安装)
    mysql主从复制跳过错误
    64位系统下powerdesigner15连接oracle odbc
    解决“指定的服务已经标记为删除”问题
    mysql系列-安装及服务启动
    数据缓存管理
    redis-在乌班图下设置自动启动
    redis-配置文件
    redis安装
    linux-用户建立及权限分配
  • 原文地址:https://www.cnblogs.com/ranzige/p/div_tooltip.html
Copyright © 2011-2022 走看看