How Can I Customize Bootstrap Tooltip Colors to Have Multiple Color Options?

Customizing Bootstrap Tooltip Colors

You aspire to modify the color of Bootstrap tooltips to fit your design preferences. However, you desire the flexibility to have multiple color options, rather than simply replacing the default color.

To achieve this, you can employ the following approach:

Customizing Colors

1. Assign a unique class name to the element that will trigger the tooltip, such as "red-tooltip."
2. Define CSS rules for the custom class to specify the desired tooltip color:

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

Preserving Black Arrow (Bootstrap versions prior to 5)

In earlier versions of Bootstrap, the tooltip arrow may appear black. To address this:

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

Customizing Colors with Bootstrap 4

For Bootstrap 4, use the following CSS rule:

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

Full Snippet (Bootstrap 4)

$(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>

The above is the detailed content of How Can I Customize Bootstrap Tooltip Colors to Have Multiple Color Options?. For more information, please follow other related articles on the PHP Chinese website!