Bootstrap 4 工具提示和弹出框上的自定义样式（箭头、Bg 等）答案

【问题标题】：Custom styles (Arrow, Bg, etc..) on Bootstrap 4 tooltips and PopoversBootstrap 4 工具提示和弹出框上的自定义样式（箭头、Bg 等）
【发布时间】：2019-03-26 16:40:01
【问题描述】：

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

另外，我很高兴看到 Bootstrap 4 Docs 上缺少的弹出框 HTML 标记看起来如何

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

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

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

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

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 tooltip popover

【解决方案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

【讨论】：