layui的tips层怎么用?下面本篇文章给大家介绍一下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,比如
你喜欢的人:
$(function(){
var tips;
$('i.tooltip-icon').on({
mouseenter:function(){
var that = this;
tips =layer.tips("说明:只能选择阿毛我,哈哈哈",that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});
},
mouseleave:function(){
layer.close(tips);
}
});
})
/* $(".ack-img").hover(function () {
layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", '.ack-img', {tips: 1});
});*/
$(function(){
var tips;
$('.ack-img').on({
mouseenter:function(){
var that = this;
tips =layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成",
that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});
//tips = layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1});
},
mouseleave:function(){
layer.close(tips);
}
});
});
更多web前端知识,请查阅 HTML中文网 !!