用Jquery写的hover时的Tip提示

最新推荐文章于 2022-03-27 21:00:45 发布

原创最新推荐文章于 2022-03-27 21:00:45 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #hover #tip

web界面专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用Jquery在鼠标悬停(hover)时创建Tip提示效果。通过结合CSS样式和JavaScript代码，实现了交互式的用户体验。

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