Change Bootstrap tooltip color

html

responsive-design

css

best-practices

byAnton Shumikhin·Feb 1, 2025

Looking to alter the default color of your Bootstrap's tooltip? Just add a custom class and defining some CSS rules. Use the following snippet:

.blue-tooltip .tooltip-inner {
    background-color: #007bff; /* Now this is what I call a true blue! */
    color: #fff; /* Traditional, yet classy */
}
.blue-tooltip .tooltip-arrow::before {
    border-top-color: #007bff; /* Even the arrow gets a new outfit */
}

Activate the color in your toolkit with:

$('[data-toggle="tooltip"]').tooltip({
    template: '<div class="tooltip blue-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});

Remember, load your custom CSS after all other stylesheets to override default styles.

Specific tooltips: one size doesn't fit all

Coloring tooltips per element

You can use custom CSS classes to differentiate tooltip design based on the particular element or situation. Red tooltips for warning? Green tooltips for info? Sky's the limit.

Tackling Bootstrap versions

Bootstrap versions could present slightly different tooltip styles. Pay attention to these version switches, and always target the correct version of Bootstrap in your CSS selections.

Dynamic tooltips with jQuery

Want each tooltip to have its own personality? Use data attributes and jQuery initialization to color your tooltips dynamically, without disturbing the base design.

Playing with opacity, borders and width

ToolTip styling goes far beyond just colors. Play with the opacity, max-width, and border-radius to add sophisticated dimensions and aesthetics to your tooltips. Let your creativity run wild!

Position-based color coding

Coloring tooltips based on position (top, right, bottom, or left) can provide visual guidance to users. Smart, huh?

Spacing and placement

In the world of tooltips, function and beauty can co-exist. Manage the padding and positioning to ensure your custom-styled tooltips do their job well. Swing that magic wand, and poof, you have stunning tooltips.

Overriding defaults - The proper way!

Style precedence is a thing - and it's important! Loading your custom CSS after the Bootstrap CSS makes sure that your design takes the upper hand.

Dependencies, they’re important

ToolTip sophistication comes at a price, and here, it's making sure that jQuery and Bootstrap files are rightly linked in your project. Remember, order matters.

explain-codes / Html / Change Bootstrap tooltip color

Linked

How do I add a tool tip to a span element?



What is the easiest way to create an HTML mouseover tool tip?



Add a tooltip to a div



How to change the style of the title attribute inside an anchor tag?



Jquery Popup Bubble/Tooltip

