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 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="https://www.php.cn/layui/jquery-1.8.3.min.js"></script>
<script type = "text/javascript" src="https://www.php.cn/layui/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);
}
});
});
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbjjg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01