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

Question

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

我尝试过堆栈闪电战

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

在你的风格中.css(我看到你已经在那里了)。

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

Answer 3

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

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

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

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

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