【bootstrap 4】 toolstip 位置偏移问题

【bootstrap 4】toolstip 位置偏移问题

【官网组件链接】https://v4.bootcss.com/docs/components/tooltips/

html 部分

 <element tip-title="提示信息">

js 部分

$(document).ready(()=>{
	
	initTooltip($('[tip-title]'));

})

// 添加/初始化tooltip提示
const initTooltip = function(jqDom){
        jqDom.each((i,ele)=>{
            const tipTitleValue = $(ele).attr('tip-title'); // 获取tip-title值
            $(ele).tooltip({boundary: 'window',trigger:'hover',container:'body',toggle:'tooltip',offset:'0,10',title:tipTitleValue});
                $(ele).on('mouseenter',function(){
                        $(ele).tooltip('update');
            })
        })
}

修改css样式

/*tooltip样式*/
/*内容*/
.tooltip .tooltip-inner {
    background-color: rgb(73, 73, 73);
}
/*三角*/
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    top: 0;
    border-width: 5px 4px 0;
    border-top-color: rgb(73, 73, 73) !important;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    bottom: 0;
    border-width: 0 4px 5px;
    border-bottom-color: rgb(73, 73, 73) !important;
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    bottom: 0;
    border-width: 4px 0 4px 5px;
    border-left-color: rgb(73, 73, 73) !important;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    bottom: 0;
    border-width: 4px 5px 4px 0;
    border-right-color: rgb(73, 73, 73) !important;
}