How Can I Customize Bootstrap Tooltip Colors?

Customizing Bootstrap Tooltip Colors

By default, tooltips in Bootstrap come in a single color. However, you may encounter situations where you desire multiple color variations. Here's a comprehensive guide to achieving this customization:

Using CSS

To alter the tooltip color, add a custom class to the element triggering the tooltip:

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

In the CSS, define styles for the custom class:

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

This will change the tooltip color to red for the element with the red-tooltip class.

Targeting Specific Tooltip Placements

If you need color customizations based on tooltip placement, consider the following:

For Bootstrap Versions Prior to 4

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

This targets tooltips placed on top and applies the red color to the tooltip arrow.

For Bootstrap 4 and Above

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

This code specifies the color for tooltips placed on the bottom. You can modify the placement in the x-placement attribute to target other placements.

Additional Resources and Demo

To try out the above methods, visit this jsFiddle:
[fiddle link]

By following these steps, you can create customized tooltip colors to suit your design requirements.

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