How to use the tips layer of layui

How to use the tips layer of layui: First introduce the files layer.css and layer.js files; then use the code format "layer.tips(msg, '#id',{tips: 1}, time :10000)"; finally set the relevant parameters.

The operating environment of this tutorial: Windows 7 system, layui version 2.4. This method is suitable for all brands of computers.

Recommendation: "javascript basic tutorial" "layUI tutorial"

Use of tips in layui

1. Introduce the files layer.css and layer.js

2. Parameter introduction:

layer.tips(content, follow, options) - tips层
{
content:tooltip内容可以是str，也可以是html代码
follow:依附的元素，一般用id表示
如果依附的元素是自己直接用this即可，如果是在其他元素的事件（比如点击）里面，记得更改this指向。
options:tips的配置型[tips位置：1上；2右；3下；4左,字体的颜色]
}

These three are required parameters, and they also have other basic parameters of the layer. , such as time (whether to close temporarily), area (set the width and height of the box), shadeClose (whether to click on the mask layer to close), etc.

3. Code example:

layer.tips(msg, '#id',{tips: 1}，time:10000)

If we don’t want to close the time, but slide across the display to create a hidden effect, we can cooperate with the mouseenter and mouseleave events. The time value at this time is 0, such as

 <div class="content" id="content">
        <label for="">你喜欢的人：</label>
        <input type="text" placeholder="请输入……">
        <i class="iconfont icon-combined-shape-copy tooltip-icon"></i>
    </div>
    <script type = "text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type = "text/javascript" src="lib/layer.js"></script>
    <script>
        $(function(){
            var tips;
            $(&#39;i.tooltip-icon&#39;).on({
                mouseenter:function(){
                    var that = this;
                    tips =layer.tips("<span style=&#39;color:#000;&#39;>说明：只能选择阿毛我，哈哈哈</span>",that,{tips:[2,&#39;#fff&#39;],time:0,area: &#39;auto&#39;,maxWidth:500});
                },
                mouseleave:function(){
                    layer.close(tips);
                }
            });
        })
    </script>
/*    $(".ack-img").hover(function () {
        layer.tips("智能组卷：每个用户考试时抽到的试题及顺序随机组成", &#39;.ack-img&#39;, {tips: 1});
    });*/
 
    $(function(){
        var tips;
        $(&#39;.ack-img&#39;).on({
            mouseenter:function(){
                var that = this;
                tips =layer.tips("<span style=&#39;color:#000;&#39;>智能组卷：每个用户考试时抽到的试题及顺序随机组成</span>",
                    that,{tips:[2,&#39;#fff&#39;],time:0,area: &#39;auto&#39;,maxWidth:500});
                //tips = layer.tips("智能组卷：每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1});
            },
            mouseleave:function(){
                layer.close(tips);
            }
        });
    });

The above is the detailed content of How to use the tips layer of layui. For more information, please follow other related articles on the PHP Chinese website!