自訂 Bootstrap 工具提示顏色
預設情況下，Bootstrap 中的工具提示為單一顏色。但是，您可能會遇到需要多種顏色變化的情況。以下是實現此自訂的綜合指南：
使用CSS
要更改工具提示顏色，請將自訂類別新增至觸發工具提示的元素：
<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" class="red-tooltip"></a>
在CSS中，定義自訂樣式class:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
background-color: #f00;
}這會將具有 red-tooltip 類別的元素的工具提示顏色變更為紅色。
定位特定的工具提示位置
如果您需要根據工具提示位置進行顏色自定義，請考慮以下：
對於4 之前的Bootstrap版本
.red-tooltip + .tooltip.top > .tooltip-arrow {
background-color: #f00;
}此目標工具提示位於頂部，並將紅色套用於工具提示箭頭。
對於 Bootstrap 4 和上面
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
}此程式碼指定放置在底部的工具提示的顏色。您可以修改 x-placement 屬性中的展示位置以定位其他展示位置。
其他資源和演示
要嘗試上述方法，請訪問此 jsFiddle:
[fiddle link]
以上是如何自訂 Bootstrap 工具提示顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
