用mouseleave和mouseenter实现提示语

怎么样用js实现当鼠标点到用户名的时候提示“双击修改用户名”这句话啊？？

 <li id="uName" class="u2">${userName}</li>

在这个上面提示：
图片说明

  <li id="uName" class="u2" title="双击修改用户名">${userName}</li>

用 hover 函数了 ,提示的话用title 属性获取属性值,放在div 弹出即可 ,或者自定义值

 <style>
 .info{
    width: 150px;
    line-height: 40px;
    border: 1px solid gold;
    background-color: wheat;
    border-radius: 10px;
    position: fixed;
    display: none;
    text-align: center;
    padding: 10px;
 }
 table{
    margin: 20% auto;
 }
</style>
<script type="text/javascript">
    $(function(){
        $("td").hover(function(e){
            //自己加一个判断，e.pageY-90<0或者epageX-60<0的话就设置为0
            //自己调整这个值，就能控制位置
            $('div.info').html($(this).html()).toggle().css({
                "top":e.pageY-90,
                "left":e.pageX-60
            })
        })  
    })
</script>
</head>

<body>
    <div class="info">

    </div>
      <table id="tba">
   <tr>
       <td > Homel</td>
       <td > About</td>
       <td >Subscribe RSS</td>
   </tr>
   </table>
</body>