css - Bootstrap 4 工具提示和弹出框上的自定义样式(Arrow、Bg 等)

Question

我正在研究 Bootstrap 4 工具提示和弹出窗口，以便能够自定义任何箭头或背景颜色、文本等。 这是我发现的。 随意添加您的代码或要求特定结果。

此外，我非常感兴趣的是看看 Bootstrap 4 Docs 上缺少的 popover HTML 标记看起来如何。

我创建的代码笔:https://codepen.io/jaabert/pen/bZJZVp

注意 (BTW) 的使用非常重要!重要于

.bs-tooltip-top,
.bs-tooltip-right,
.bs-tooltip-left,
.bs-tooltip-bottom {
  background-color: transparent;
  opacity: 1!important;
}

只是为了覆盖 B4 样式，因为默认情况下工具提示不是 100% 不透明的。

Answer 1

我已经用 popover html 标记和一些解决方案更新了 codepen，这些解决方案虽然不优雅但简单有效，纯 CSS。还要注意“bs-popover-top”上的样式子伪元素:

      <div class="popover bs-popover-top show" role="tooltip">
        <div class="arrow" style="left: 50%"></div>
        <h3 class="popover-header">Popover header</h3>
        <div class="popover-body">Popover -body</div>
      </div>   

https://codepen.io/jaabert/pen/bZJZVp