Bootstrap hover触发Popover内嵌卡片时默认背景残留问题如何解决

出现该问题的核心原因是你仅配置了popover内嵌卡片的样式，没有覆盖Bootstrap Popover组件外层容器的默认样式：Bootstrap默认给.popover容器设置了白色背景、灰色边框、内边距和阴影，给.popover-body内容区设置了默认内边距，这些外层样式没有被重置，就会从卡片边缘漏出。

具体操作步骤 #

• 第一步：给当前Popover添加自定义类，避免修改影响全站其他Popover组件
  修改你的Popover初始化JS代码，新增customClass配置项：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover',
        html : true,
        customClass: 'no-bg-popover', // 新增自定义类
        content : '<div class="container mt-5 d-flex justify-content-center"> <div class="card p-3"> <div class="d-flex align-items-center"> <div class="image"> <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="rounded" width="155"> </div><div class="ml-3 w-100"> <h4 class="mb-0 mt-0">Alex Morrision</h4> <span>Senior Journalist</span> <div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats"> <div class="d-flex flex-column"> <span class="articles">Articles</span> <span class="number1">38</span> </div><div class="d-flex flex-column"> <span class="followers">Followers</span> <span class="number2">980</span> </div><div class="d-flex flex-column"> <span class="rating">Rating</span> <span class="number3">8.9</span> </div></div><div class="button mt-2 d-flex flex-row align-items-center"> <button class="btn btn-sm btn-outline-primary w-100">Chat</button> <button class="btn btn-sm btn-primary w-100 ml-2">Follow</button> </div></div></div></div></div>'
    });
});

• 第二步：新增CSS样式覆盖Popover默认属性
  在你的样式文件中添加如下代码：

/* 清空popover外层容器默认样式 */
.no-bg-popover {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* 清空popover内容区默认内边距和背景 */
.no-bg-popover .popover-body {
  padding: 0;
  background: transparent;
}
/* 如果不需要popover默认的指示箭头，可添加以下代码隐藏 */
.no-bg-popover .arrow {
  display: none;
}

如果需要保留Popover的指示箭头，只需调整.arrow类的样式匹配你的卡片设计即可，无需隐藏。

内容的提问来源于stack exchange，提问作者Bubbycolditz