layui tips

layui 说明

// layer.tips(‘要提示的内容’。’, 要绑定的元素(id # ,class . 标签 标签), {
// tips: [1, ‘#3595CC’], 提示样式 颜色
// time: 2000 打开后在屏幕显示时间
// });

鼠标移入显示提示

引入官方layui js

 <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.4/layui.js"></script>

给标签动态添加鼠标移入事件
document.getElementById(“lab_string2”).addEventListener(“mouseover”, function () {
layer.tips(‘我是另外一个tips，只不过我长得跟之前那位稍有些不一样。’, ‘#lab_string2’, {
tips: [1, ‘#3595CC’],
time: 2000
});

})
效果图

优化使用说明

上面虽然实现了，但是这只适用于一个页面只有一个提示，如果页面要提示的标签过多，就会代码冗长，难以维护

window.addEventListener(“mouseover”, function (e) {
// includes 在ES5，Array已经提供了indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。另一个问题是不能判断是否有NaN的元素
//ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素，对NaN一样能有有效。
if ([null, ’ '].indexOf(e.fromElement.id) == -1) {
if ([‘lab_string2’,‘lab_string3’,‘lab_string4’,‘lab_string5’,‘lab_string6’,‘lab_string7’,‘lab_string8’].indexOf(e.fromElement.id)!==-1) {
let tip = “”;
let demo = ‘#’;
let demos = ‘’
switch (e.fromElement.id) {
case ‘lab_string2’:
tip = “我是mood2”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string3’:
tip = “我是mood3”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string4’:
tip = “我是mood4”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string5’:
tip = “我是mood5”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string6’:
tip = “我是mood6”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string7’:
tip = “我是mood7”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string8’:
tip = “我是mood8”;
demos = demo + e.fromElement.id;
break;
// default:
// tip = “我是你好啊”;
// break;
}
layer.tips(tip, demos, {
tips: [1, ‘#3595CC’],
time: 2000
})
}

}

// if (e.id==lab_string9) {
//   alert("mood");
// }

})