如何將自定義樣式添加到 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;
}