How Can I Change the Color of Bootstrap Tooltips?

How to Change Bootstrap Tooltip Color

Changing the tooltip color in Bootstrap allows you to customize its appearance to match your website's design. This can be achieved by adding custom CSS styles.

To change the tooltip color, start by assigning a unique class to the element where you're using the tooltip. For example:

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

Next, add the following CSS rules:

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

This will change the tooltip's arrow and inner background to red. You can replace #f00 with any desired color code to customize the tooltip's color.

In Bootstrap 4, you may need to specifically target the bottom placement arrow to remove the default black color:

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

Additionally, for Bootstrap 4, use the following CSS for tooltips:

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

The above is the detailed content of How Can I Change the Color of Bootstrap Tooltips?. For more information, please follow other related articles on the PHP Chinese website!