layui 鼠标移动到单元格显示tips(layer.tips)

本文介绍了如何使用layui实现表格中鼠标悬停显示tips的效果。通过三步实现:1. 在field部分设置templet引用模板;2. 在jsp部分创建脚本,包含数据内容和显示元素;3. 编写JavaScript函数show_shopm,利用layer.tips显示内容,并设定位置和消失时间。参考文章进一步探讨了layui的hover效果。
摘要由CSDN通过智能技术生成

分下面三个步骤实现表格的tips实现:

1,field 部分:加入【templet:'#titleTipl'】

cols: [[ //表头
          {field: '#', 
           title: 'XXX',
           sort: true,
           width:130,
           templet:'#titleTipl',//模板id的DOM
           }
        ]]

2,jsp部分:其中【data-d】为要tips的内容,【d.name】是本身单元格要显示的内容

<script type="text/html" id="titleTipl">
    <a href="javascript:;" data-d="{ {d.descript}}" οnmοuseοver="show_shopm(this)">{ {d.name}}</a>
</script>

3,显示描述:其中第一个参数1,2,3,4表示tips显示的位置(上下左右)
    function show_shopm(t){
        var row=$(t).attr('data-d'); //获取显示内容
        //小tips
      

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值