layui的tips层怎么用？

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;
            $('i.tooltip-icon').on({
                mouseenter:function(){
                    var that = this;
                    tips =layer.tips("<span style='color:#000;'>说明：只能选择阿毛我，哈哈哈</span>",that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});
                },
                mouseleave:function(){
                    layer.close(tips);
                }
            });
        })
    </script>

/*    $(".ack-img").hover(function () {
        layer.tips("智能组卷：每个用户考试时抽到的试题及顺序随机组成", '.ack-img', {tips: 1});
    });*/
$(function(){
var tips;
$('.ack-img').on({
mouseenter:function(){
var that = this;
tips =layer.tips("<span style='color:#000;'>智能组卷：每个用户考试时抽到的试题及顺序随机组成</span>",
that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});
//tips = layer.tips("智能组卷：每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1});
},
mouseleave:function(){
layer.close(tips);
}
});
});

更多web前端知识，请查阅 HTML中文网 ！！

以上就是layui的tips层怎么用？的详细内容，更多请关注0133技术站其它相关文章！