如何自訂 Bootstrap 工具提示顏色？

自訂 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]

[fiddle link][fiddle link][fiddle link][fiddle link][fiddle link]按照以下步驟，您可以建立自訂工具提示顏色以滿足您的設計要求。

以上是如何自訂 Bootstrap 工具提示顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！