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

【问题标题】：How to add custom style to ngx-bootstrap/tooltip如何将自定义样式添加到 ngx-bootstrap/tooltip
【发布时间】：2020-12-02 02:10:27
【问题描述】：

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

我在StackBlitz试过

【问题讨论】：

它确实适用于你的 stackblitz。有什么问题？
工具提示内容的边框没问题。但是对于工具提示箭头，我只需要边框而不是那个填充的三角形

标签： css angular ngx-bootstrap

【解决方案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;
}

【讨论】：

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

【讨论】：

【解决方案3】：

如果这对任何人有帮助，我可以完全摆脱箭头：

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

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

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

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

【讨论】：