您渴望修改 Bootstrap 工具提示的顏色以適應您的設計偏好。但是，您希望能夠靈活地擁有多種顏色選項，而不是簡單地替換預設顏色。
要實現此目的，您可以採用以下方法：
.red-tooltip + .tooltip > .tooltip-inner {
background-color: #f00;
/* Red color */
}為將觸發工具提示的元素分配一個唯一的類名，例如「red-tooltip。」
.red-tooltip + .tooltip.top > .tooltip-arrow {
background-color: #f00;
}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red color */
}$(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 */
}<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 工具提示顏色以具有多種顏色選項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
