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

Question

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

我在StackBlitz 中尝试过

Answer 1

您可以将箭头设置为白色

: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/但从可用性（平面设计）和浏览器兼容性来看，我建议为工具提示边框和箭头使用一种颜色

Answer 2

将此添加到您的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 3

如果这对任何人都有帮助，我可以通过以下方式完全摆脱箭头：

.tooltip.top .tooltip-arrow {
   display: none;
}

您必须将“.top”更改为您拥有的任何类型的工具提示（.bottom、.side 等），否则您将看不到任何变化。

然后以下内容自定义了工具提示的其余部分：

.tooltip-inner {
    border: 1px solid #ddd;
    background-color: #fff;
    color : #000000;
}