用Jquery写的hover时的Tip提示

来源：互联网发布：淘宝网家居拖鞋编辑：程序博客网时间：2024/05/20 18:01

有时写表格时有些东西一行肯定显示不完，比如一个对象有20多个属性，很长的备注等等，就可以用hover时的悬浮提示来显示我实现的效果如图，当然tip窗就是个div，可以自己写很多css样式来美化写在这方便自己下次用，免得忘了![简单的tip提示](http://img.blog.csdn.net/20150625193637513)

界面代码

<table width="200" border="1"><thead>  <tr>    <th scope="col">学号</th>    <th scope="col">姓名</th>    <th scope="col">性别</th>  </tr></thead><tbody>  <tr>    <th scope="row">124124</th>    <td>哈哈</td>    <td>男</td>    <td class='hidden-detail'>我是Tip  哈哈,我是一个<b>好人</b>，我的电话是123456578,别忘联系我哦</td>  </tr>  <tr>    <th scope="row">324134</th>    <td>嘻嘻</td>    <td>嘻嘻</td>    <td class='hidden-detail'>我是Tip  嘻嘻,我是一个<b>坏人</b></td>  </tr></tbody></table>

css代码

    .tip{        position:absolute;        background:#9FC;        border-color:#F60;        z-index:9999;        filter:alpha(opacity=80);          -moz-opacity:0.8;          -khtml-opacity: 0.8;          opacity: 0.8;      }    .hidden-detail{        display:none;    }

javacript

$(function(){        var tip="";        $("table tbody tr").hover(function(e){            tip="<div class='tip'>"+$(this).children("td:last").text()+"</div>";            $("body").append(tip);            $(".tip").css({"top":e.pageY+"px","left":e.pageX+"px"}).show(1000);            $(this).mousemove(function(e){                $(".tip").css({"top":e.pageY+"px","left":e.pageX+"px"}).show(1000);            });        },function(){            $(".tip").remove();            });    });

0 0