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

Question

我正在使用ngx bootstrap工具提示。我想改变箭头的颜色：

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

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

Answer 1

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

您可以使用所需的边框颜色添加更大的三角形并将其隐藏在原始边框下。例如，您可以调查引导程序中 popover 箭头的完成情况。 :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;
  }

我将其添加为类，以根据状态具有不同的工具提示。