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

Question

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

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

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

Answer 1

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

您可以添加所需边框颜色的较大三角形并将其隐藏在原始边框下。例如，您可以调查它是如何为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 example顶部的工具提示。

Answer 2

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

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

我根据状态添加类等待具有不同的工具提示。