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

1、问题概述在开发中有时候需要展示的内容非常的多这个时候就需要通过tips弹框显示出完整的内容。解决办法使用jQuerylayui-table方式实现。效果如下框架的大小位置颜色可以更改2、实现方式2.1、配置table的相关属性案例从官网中来重点给返回值加上class属性div classtipsfundata.sign/divcols: [[ //标题栏 {field: id, title: ID, width: 80, sort: true}, {field: username, title: 用户, width: 120}, {field: sign, title: 签名, minWidth: 160,templet:function(data){ return div classtipsfundata.sign/div; }}, {field: sex, title: 性别, width: 80}, {field: city, title: 城市, width: 100}, {field: experience, title: 积分, width: 80, sort: true} ]]2.2、为classtipsfun加入鼠标事件【1、在jquery的ready中初始化即可】使用jQuery的方式为又classtipsfun加入鼠标移入事件和鼠标移出事件$(function(){ var laytips; //鼠标进入获取当前内容并弹框显示 $(.tipsfun).on(mouseover,function(){ var currentText$(this).text(); laytipslayer.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(); laytipslayer.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 charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titleDemo/title !-- 请勿在项目正式环境中引用该 layui.css 地址 -- link hreflayui/css/layui.css relstylesheet /head body table classlayui-hide idID-table-demo-data/table !-- 请勿在项目正式环境中引用该 layui.js 地址 -- script srclayui/layui.js/script script srcjquery-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 classtipsfundata.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(); laytipslayer.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