layui的tips層怎麼用

layui的tips層的使用方法：首先引入檔案layer.css和layer.js檔案；然後使用程式碼格式為「layer.tips(msg, '#id',{tips: 1}，time :10000)”；最後設定相關參數即可。

本教學操作環境：Windows7系統、layui2.4版，此方法適用於所有品牌電腦。

推薦：《javascript基礎教學》《layUI教學》

layui中tips的使用

1、引入檔案layer.css 、 layer.js

2、參數介紹：

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

這3個是必填參數，也同時具有layer的其他基礎參數，例如time（是否定時關閉），area（設定框的寬高），shadeClose（是否點擊遮罩層關閉）等。

3、程式碼範例：

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

如果我們不想定時關閉，而是劃過顯示，劃出隱藏的效果，可以配合mouseenter、mouseleave事件即可，此時的time值為0，例如

 

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

以上是layui的tips層怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！