添加tip

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)
    };
}