当前位置：首页 > news >正文

Layui的实现鼠标移入tips弹框提示、tips悬停提示

news 2026/7/9 22:24:14

1、问题概述？

在开发中，有时候需要展示的内容非常的多，这个时候就需要通过tips，弹框显示出完整的内容。

解决办法：使用jQuery+layui-table方式实现。

效果如下：

框架的大小，位置，颜色可以更改

2、实现方式

2.1、配置table的相关属性

案例从官网中来

重点：给返回值加上class属性：<div class='tipsfun'>"+data.sign+"</div>

cols: [[ //标题栏 {field: 'id', title: 'ID', width: 80, sort: true}, {field: 'username', title: '用户', width: 120}, {field: 'sign', title: '签名', minWidth: 160,templet:function(data){ return "<div class='tipsfun'>"+data.sign+"</div>"; }}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, {field: 'experience', title: '积分', width: 80, sort: true} ]]

2.2、为class="tipsfun"加入鼠标事件

【1、在jquery的ready中初始化即可】

使用jQuery的方式为又class="tipsfun"加入鼠标移入事件和鼠标移出事件

$(function(){ var laytips=""; //鼠标进入，获取当前内容并弹框显示 $(".tipsfun").on("mouseover",function(){ var currentText=$(this).text(); laytips=layer.tips(currentText,this,{ tips:[1, '#000'],//设置tips的类型和颜色 time:30000,//tips默认显示时长 area:['300px','100px']//设置tip的宽高 }) }); //鼠标移开后关闭tips $(".tipsfun").on("mouseout",function(){ layer.close(laytips); }); });

【2、在layui table中的done函数中初始化也可以】

因为：done是在数据渲染完毕的回调函数

time:定义弹框默认显示的时长，毫秒单位

area:设置弹框的显示宽高

tips:显示弹框的类型和颜色

done:function(res,curr,count){ var laytips=""; //鼠标进入，获取当前内容并弹框显示 $(".tipsfun").on("mouseover",function(){ var currentText=$(this).text(); laytips=layer.tips(currentText,this,{ tips:[1, '#000'],//设置tips的类型和颜色 time:30000,//tips默认显示时长 area:['300px','100px']//设置tip的宽高 }) }); //鼠标移开后关闭tips $(".tipsfun").on("mouseout",function(){ layer.close(laytips); }); },

3、完整代码

将代码中的css和js换成你自己的文件。

jquery使用的是1.8或更高版本。

layui使用最新版本就行

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <!-- 请勿在项目正式环境中引用该 layui.css 地址 --> <link href="layui/css/layui.css" rel="stylesheet"> </head> <body> <table class="layui-hide" id="ID-table-demo-data"></table> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script src="layui/layui.js"></script> <script src="jquery-1.8.0.min.js"></script> <script> layui.use('table', function(){ var table = layui.table; // 已知数据渲染 var inst = table.render({ elem: '#ID-table-demo-data', cols: [[ //标题栏 {field: 'id', title: 'ID', width: 80, sort: true}, {field: 'username', title: '用户', width: 120}, {field: 'sign', title: '签名', minWidth: 160,templet:function(data){ return "<div class='tipsfun'>"+data.sign+"</div>"; }}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, {field: 'experience', title: '积分', width: 80, sort: true} ]], data: [{ // 赋值已知数据 "id": "10001", "username": "张三1", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "116" }, { "id": "10002", "username": "张三2", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "12", "LAY_CHECKED": true }, { "id": "10003", "username": "张三3", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "65" }, { "id": "10004", "username": "张三4", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "777" }, { "id": "10005", "username": "张三5", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "86" }, { "id": "10006", "username": "张三6", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "12" }, { "id": "10007", "username": "张三7", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "16" }, { "id": "10008", "username": "张三8", "sex": "男", "city": "浙江杭州", "sign": "人生恰似一场修行", "experience": "106" }], //skin: 'line', // 表格风格 //even: true, page: true, // 是否显示分页 limits: [5, 10, 15], limit: 5 // 每页默认显示的数量 }); }); $(function(){ var laytips=""; //鼠标进入，获取当前内容并弹框显示 $(".tipsfun").on("mouseover",function(){ var currentText=$(this).text(); laytips=layer.tips(currentText,this,{ tips:[1, '#000'],//设置tips的类型和颜色 time:30000,//tips默认显示时长 area:['300px','100px']//设置tip的宽高 }) }); //鼠标移开后关闭tips $(".tipsfun").on("mouseout",function(){ layer.close(laytips); }); }); </script> </body> </html>

查看全文

http://www.jsqmd.com/news/613551/