layui 表头添加提示

刘梦凡呀

已于 2024-02-23 16:41:47 修改

阅读量2.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Layui 文章标签： layui 前端 jquery

于 2022-04-18 15:33:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42782011/article/details/124250821

Layui 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种方法，通过CSS和JavaScript为表格添加鼠标悬停提示效果，详细阐述了如何设置表格样式以适应长内容，并且展示了如何绑定mouseenter和mouseout事件来实现提示框的显示和隐藏。此外，还提供了相关的CSS代码和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图吧，省的浪费大家的时间不好：
在这里插入图片描述

表格内容应该这么写：

在这里插入图片描述
代码：

{ field: 'levelTwoId', title: `采集字段<i class="layui-icon alone-tips analyseTips" lay-tips="加粗部分是需要学校填报的采集项">&#xe60b;</i>`, minWidth: 80, hide: true, align: "center" },

若内容太长，则需要换行，css:

    .layui-layer-tips {
        width: 40% !important;
        word-break: break-all;
    }

然后需要给这个表格添加鼠标移入移出事件，鼠标移入事件是mouseenter，移出事件mouseout，
知道这些就好写了：

    $(document).on('mouseenter', '.analyseTips', function ()
    {
        var tp= $(this).attr("lay-tips");
        this.index = layer.tips('<div style="padding: 5px; font-size: 12px; color: #eee;">' + tp+ '</div>', this, {
            time: -1
            , maxWidth: 260
            , tips: [3, '#3A3D49']
        });
    }).on('mouseout','.analyseTips', function () {
        layer.close(this.index);
    });