twitter-bootstrap - ngx-bootstrap 工具提示箭头用不同颜色的边界改变颜色

Question

我正在使用 ngx 引导工具提示。我正在尝试将箭头的颜色更改为：

.tooltip.customClass .tooltip-arrow {
    border-right-color: white;
}

问题是整个箭头变成与页面背景白色相匹配的白色，因此变得不可见。我想让箭头的两个边界保持不同的颜色，比如说“黑色”，所以我看到一个带有两个黑色边界的白色箭头。我希望它看起来有点像上面附上的这张图片：

Answer 1

我是 ngx-bootstrap 的贡献者，没有简单的方法可以解决这个问题；）这个箭头实际上是一个边框，你不能给边框添加边框。

您可以添加具有所需边框颜色的更大三角形并将其隐藏在原始下方。例如，您可以调查它是如何在引导程序中为弹出箭头完成的。有:before和:after里面<div class="arrow">。

<div class="popover bs-popover-top bs-popover-top-docs">
    <div class="arrow">
        :before
        :after
    </div>
    ...
</div>

在这种情况下：

:before- 带有箭头边框颜色的更大三角形。

:after- 主要颜色的主要三角形。

！但是对于工具提示组件:before是一个主三角形，如果你要添加:after，不要忘记添加z-index: -1;更大的三角形。

这是顶部工具提示的jsfiddle 示例。

Answer 2

我试试这个，它有效！！！！我可以用这个改变箭头颜色：

  :host >>> .pending .tooltip-arrow:before,
  :host >>> .tooltip.left .pending .tooltip-arrow::before {
    border-left-color: #eba413 !important;
  }

我将它添加到待处理的类中，以根据状态具有不同的工具提示。