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>
4、一个页面有多个tips
记得换触发事件的元素、依附的元素、tips定义一次即可。比如:
var tips;
$('i.drug-tooltip-icon1').on({mouseenter:function(){tips =layer.tips("<span style='color:#000;'>我喜欢阿毛</span>","#id1",{tips:[3,'#ddd'],time:0,area: 'auto',maxWidth:500,tipsMore:true});},mouseleave:function(){layer.close(tips);}});$('i.drug-tooltip-icon2').on({mouseenter:function(){tips =layer.tips("<span style='color:#000;'>我喜欢阿怪</span>","#id2",{tips:[3,'#ddd'],time:0,area: 'auto',maxWidth:500,tipsMore:true});},mouseleave:function(){layer.close(tips);}});
一、相关参数:
1、tips – tips方向和颜色
tips – tips方向和颜色
类型:Number/Array,默认:2
tips层的私有参数。支持上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, ‘#c00’]
2、layer.tips(content, follow, options) – tips层
3、time参数
time – 自动关闭所需毫秒
类型:Number,默认:0 不会自动关闭
默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)
layer.tips定义弹出的颜色和宽度
layer.tips('xxx', '.onlinetest', {tips: [1, '#3595CC'],area: ['500px', 'auto'],time: 4000
});
layui的icon