如何自訂 Bootstrap 工具提示顏色以具有多種顏色選項？

自訂 Bootstrap 工具提示顏色

您渴望修改 Bootstrap 工具提示的顏色以適應您的設計偏好。但是，您希望能夠靈活地擁有多種顏色選項，而不是簡單地替換預設顏色。

要實現此目的，您可以採用以下方法：

自訂顏色

自訂顏色
1. 自訂顏色
自訂顏色

.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
  /* Red color */
}

/h3>

為將觸發工具提示的元素分配一個唯一的類名，例如「red-tooltip。」

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

為自訂類別定義CSS 規則以指定所需的工具提示顏色：

保留黑色箭頭（5 之前的Bootstrap 版本）

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

在 Bootstrap 的早期版本中，工具提示箭頭可能會顯示為黑色。若要解決此問題：

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  /* Custom settings for your main tooltip element */
}

.tooltip-qm {
  /* Custom settings for the question mark icon inside the main tooltip element */
}

.tooltip-inner {
  /* Custom settings for the tooltip content */
}

.tooltip.show {
  /* Custom settings for the visible tooltip */
}

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

使用Bootstrap 4 自訂顏色

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red color */
  }
</style>

對於Bootstrap 4，請使用下列CSS 規則：完整程式碼片段(Bootstrap 4)

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