layui 鼠标移动在文字上显示 lay-tips 方法

2021-7-13    前端达人

代码：

在源代码加上 

<i class="layui-icon layui-icon-tips" lay-tips="最大长度为16个文字" ></i>

JS代码

加上js代码 

$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');

this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});






禁用鼠标事件,设置pointer-events属性为none:

pointer-events:none

开启鼠标事件,设置pointer-events为auto:

pointer-events:auto








蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


分享本文至：
« js判断当前浏览器的分辨率 5个技巧，让你的做图效率翻10倍！ »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档