如何更改 Bootstrap 工具提示的顏色？

如何更改Bootstrap 工具提示顏色

更改Bootstrap 中的工具提示顏色可讓您自訂其外觀以符合您網站的設計。這可以透過添加自訂 CSS 樣式來實現。

要變更工具提示顏色，請先為使用工具提示的元素指派一個唯一的類別。例如：

<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>

接下來，加入以下 CSS 規則：

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}

這會將工具提示的箭頭和內部背景改為紅色。您可以將 #f00 替換為任何所需的顏色代碼，以自訂工具提示的顏色。

在Bootstrap 4 中，您可能需要專門定位底部放置箭頭以刪除預設的黑色：

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}

此外，對於Bootstrap 4，請使用以下CSS 作為工具提示：

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

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