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

你的styles.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;
}

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

3 个答案: