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

Question

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

Answer 1

您可以通过输入

将箭头设置为白色

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

在您的 app.component.css 中，它仅影响 app.component 的 children - 我假设您只需要本地样式。

或者将它们全局放置

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

在您的 styles.css 中（我看到您已经在那里了）。

至于第二个问题，不，你不能做边框，因为三角形在技术上是一个边框。你可以像这样为它制作阴影：https://css-tricks.com/triangle-with-shadow/ 但从可用性 (flat-design) 和 browser-compatibility 我建议使用一种颜色作为 tooltip-border 和箭头

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;
}

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

How to add custom style to ngx-bootstrap/tooltip

css

ngx-bootstrap

angular