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	是否允许多个tips	Boolean	默认：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'); //火狐兼容