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);

});

如图：