添加tip

来源:互联网 发布:php分割 编辑:程序博客网 时间:2024/06/11 05:17
html:
<div id="body_2" >    <br/><h1>欢迎来到极客学院</h1>    <br/>    <span style="margin-top: 20px">       &nbsp;&nbsp; 极客学院的及“桥接”,弥合了高校学生进入职场角色的断层问题,入职公司后可以很好的应对工作中的挑战,迅速融入技术团队完成项目整体开发。从而帮助企业更高效、有力<a id="tooltip" href="#">“纽带”</a>的建设人才梯队。一直以来我们都把极客学院作为公司的重要人才储备库资源。    </span></div>
css:
.tooltip-box{    display: block;    background-color: aliceblue;    line-height: 6px;    border: 1px solid darkturquoise;    color: #333;    padding: 20px;    font-size: 12px;    border-radius: 5px;    overflow: auto  /*当内容大于框的内容时允许出现滑动条*/;    position: absolute;}

js:
$(document).ready(function(){      $("#tooltip").hover(function(){        showTootip(this,"tip1","<a href='#'>sjdkaskdasjkljdkajwkjdklwj</a>",120);    });});
function showTootip(obj,id,html,width,height){    if(document.getElementById(id)==null){        var tooltipbox;        tooltipbox=document.createElement("div");        tooltipbox.className="tooltip-box";        tooltipbox.id=id;        tooltipbox.innerHTML=html;        tooltipbox.style.display="block";        var boxleft=obj.offsetLeft;        var boxtop=obj.offsetTop+20;        tooltipbox.style.left=boxleft+"px";        tooltipbox.style.top=boxtop+"px";        obj.appendChild(tooltipbox);    }else{            document.getElementById(id).style.display="block";    }    obj.onmouseout=function(){        setTimeout(function(){        document.getElementById(id).style.display="none";    },400)    };}


原创粉丝点击