如何将自定义样式添加到ngx-bootstrap / tooltip

Question

我已经更改了工具提示的背景和边框颜色。工具提示中的箭头应填充白色而不是黑色和边框。那可能吗

我曾在StackBlitz尝试过

Answer 1

在style.css文件中添加此项。

.tooltip.bottom .tooltip-arrow {
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-right: none;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: white;
}

Answer 2

您可以通过放置将箭头设置为白色

:host ::ng-deep .tooltip-arrow {
  border-bottom-color: white;
}

在你的app.component.css中它只影响app.component的孩子 - 我假设你只想在本地使用这个样式。

或者让它们全球化

.tooltip-arrow {
   border-bottom-color: white;
}

在你的styles.css中（我看到你已经拥有它）。

至于第二个问题，不能你不能建立边界，因为三角形在技术上是一个边界。你可以像这样为它制作一个阴影：https://css-tricks.com/triangle-with-shadow/但是从可用性（平面设计）和浏览器兼容性我推荐使用一种颜色的工具提示边框和箭头