layer.tips使用+样式修改

在这里插入图片描述

使用——鼠标滑过或移开控制tips的显示和隐藏

    步1:$(’.fujian’) ------ 获取需要显示tips的元素

    步2: $(’.fujian’).on() ----- 绑定事件

    步3: mouseenter:function(){…} ----- 鼠标移入事件

        layer.tips(content, follow, options)

              1.content ---- tips内容。可以是str,也可以是html代码。案例中的html
              2.follow ---- tips依附的元素。案例中的$(’.fujian’)
              3.option ---- tips的配置型。

参数说明类型参数说明
tips设置tips方向和颜色Number/Array默认:2 。支持上右下左四个方向,通过1-4进行方向设定。
如tips: 3----在元素的下面出现。
有时你还可能会定义一些背景颜色,可以设定tips: [1, ‘#c00’]
times设置tips显示时间Number
area设置tips的宽高String/Array默认为’auto’,可以设置为[‘auto’,‘auto’],或者[‘120px’,‘120px’]
tipsMore是否允许多个tipsBoolean默认:false。允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

        案例

layer.tips(html,that, {tips: [3, '#fff'],time: 9999000,area: ['700px', '400px'],});

    步4: mouseleave: function(){…} ----- 鼠标移出事件

        关闭tips

                layer.close(tips元素) ---- 案例中的table

    完整jq代码:

$('.fujian').on({
	mouseenter: function() {
    	var that = this;
        let html = '';
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>重点领域中小微企业曾在往期补贴项目中成功申报并获得补贴的专利不可以再次提交;</div></div>";
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>为让更多本市企业享受到本次试点工作带来的政策支持,申报企业应该根据专利被侵权可能性等指标,对拟申报专利进行排序,按顺序添加专利,以供专家组在投保审核过程中进行综合考虑;</div></div>";
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>制造业单项冠军示范企业以及外资隐形冠军企业,保费补贴最高50万元,首次申报每件专利补贴2.5万元,第二次申报每件专利补贴2万元;</div></div>";
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>制造业单项冠军产品企业保费补贴最高30万元,首次申报每件专利补贴2.5万元,第二次申报每件专利补贴2万元;</div></div>";
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>制造业单项冠军培育企业保费补贴最高20万元,首次申报每件专利补贴2.5万元,第二次申报每件专利补贴2万元;</div></div>";
        html +="<div class='fujian_tips_box'><div class='fujian_dot'></div><div>重点领域中小微企业保费补贴最高20万元,首次申报每件专利补贴1万元,第二次申报每件专利补贴0.9万元。请各类型企业根据补贴规则结合实际情况填报专利。</div></div>";
        html +="<div style='color:#B6141A;line-height:40px'>注:第二次申报指企业曾参加过2020年北京市知识产权保险试点项目并已经获得申报补贴。</div>";
        table = layer.tips(html,that, {tips: [3, '#fff'],time: 9999000,area: ['700px', '400px'],});
        $('.layui-layer-content').css('height', '368px'); //火狐兼容
    },
    mouseleave: function() {
    	layer.close(table);
    }
});

样式修改

修改三角形样式

通用class ---- .layui-layer-TipsG
tips上方式显示---- .layui-layer-TipsT
tips下方式显示---- .layui-layer-TipsB
tips左方式显示---- .layui-layer-TipsL
tips右方式显示---- .layui-layer-TipsR

.layui-layer-TipsG {
	width: 15px !important;
    height: 15px !important;
    background-color: #fff;
    transform: rotate(45deg);
    border-color: #fff !important;
    box-shadow: 0px 3px 10px 0px rgba(143, 140, 140, 0.31) !important;
    border: 1px solid #D8DCE5 !important;
}
        
.layui-layer-TipsB:after {
    position: absolute;
    bottom: -27px;
    left: 5px;
    content: '';
    width: 34px;
    height: 49px;
    background: #fff;
    transform: rotate(45deg);
}
        
.layui-layer-TipsT:after {
	position: absolute;
    bottom: -2px;
    left: -15px;
    content: '';
    width: 31px;
    height: 50px;
    background: #fff;
    transform: rotate(45deg);
}
.layui-layer-tips i.layui-layer-TipsB,
.layui-layer-tips i.layui-layer-TipsT {
	left: 25px !important;
}

修改tips主体样式----layui-layer-content

.layui-layer-content {
	border-radius: 8px !important;
    box-sizing: border-box;
    padding: 30px 20px 30px 26px !important;
    border: 1px solid #D8DCE5;
    box-shadow: 0px 3px 10px 0px rgba(143, 140, 140, 0.31) !important;
}

自定义tips内容样式

.fujian {
	font-size: 16px;
    color: #3e5fdd;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}
.fujian_tips_box {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    color: #666;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 15px;
}
        
.fujian_dot {
	width: 10px;
    height: 10px;
    margin-right: 10px;
    margin-top: 5px;
    background: #D9181F;
    border-radius: 50%;
    border: 3px solid #FEBEB3;
    flex-shrink: 0;
}

修改与元素的距离

      直接设置margin是无效的。可以通过增加元素高度来设置tips与元素的距离。

火狐浏览器兼容性

$('.layui-layer-content').css('height', '368px'); //火狐兼容
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值