layer 的提示层 tips的一般使用
1.提示层在鼠标经过的情况下出现，鼠标移开消失，且需提示的文案是固定写死的，不需要动态改变的
html:
<div id="layui-layer-tips"></div>
js:
var layer_tips = 0;
$(document).on('mouseenter', '#layui-layer-tips', function () {
layer_tips = layer.tips('我是固定文案！', '#layui-layer-tips', {
time: 0,
tips: 3
});
}).on('mouseleave', '#layui-layer-tips', function () {
layer.close( layer_tips);
});
2.这里是如果页面中有多处需要提示层的地方，且文案是需要动态变化的，封装成函数调用
html:
<div class="layui-layer-tips" data-tips="我是动态变化的文案1111"></div>
<div class="layui-layer-tips" data-tips="我是动态变化的文案2222"></div>
<div class="layui-layer-tips" data-tips="我是动态变化的文案3333"></div>
js：
var layerTips = function (obj,cl) {
var tip_index;
var msg = $(obj).attr('data-tips');
if(!cl){
tip_index = layer.tips(msg, obj, {
tipsMore: true,
time: 0,
tips: 3
});
}else{
layer.closeAll();
}
}
$(document).on('mouseenter', .layui-layer-tips', function () {
layerTips(this);
}).on('mouseleave', ' .layui-layer-tips', function () {
layerTips(this,1);
});
示例：
html:
<div class="layui-col-md6 list">
<a href="#">
<i class="oa-icon oa-icon-xiazai layui-fontColor_999 layui-icon-mr6 layui-layer-tips" data-tips="下载人数"></i>
<span>33</span>
</a>
</div>
js:
var layerTips = function (obj,cl) {
var tip_index;
var msg = $(obj).attr('data-tips');
if(!cl){
tip_index = layer.tips(msg, obj, {
tipsMore: true,
time: 0,
tips: 3
});
}else{
layer.closeAll();
}
}
$(document).on('mouseenter', '.list .layui-layer-tips', function () {
layerTips(this);
}).on('mouseleave', .list .layui-layer-tips', function () {
layerTips(this,1);
});
如图：
