How to Change Bootstrap Tooltip Text and Background Colors
In this article, you will learn how to change and customize Bootstrap tooltip text and background colors.
Bootstrap tooltips are small graphical user interface elements that appear when users hover (position the cursor) over an element (such as a button or link), displaying information about that element.
They typically contain brief contextual information, hints, or descriptions, offering users additional guidance about specific UI elements.
They are primarily meant to provide supplementary details about elements without cluttering the interface.
Bootstrap tooltips by default consist of white text with a black background, rounded borders, and an arrow/caret pointing toward the element being explained.
While the default appearance of the tooltips is generally good, you may in some scenarios want to modify their colors to match your overall design aesthetic to align them with your brand or to provide better visual contrast for improved accessibility.
Customizing Bootstrap Tooltip Colors
Customizing of tooltip colors will slightly differ between different Bootstrap versions. Let's first compare the generated tooltip markups by Bootstrap 5 and Bootstrap 4.
In Bootstrap 5, a button with a tooltip will look like the below:
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Sample tooltip text">Hover Me!</button>
It will generate the tooltip markup below:
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Sample tooltip text
</div>
</div>
A Bootstrap 4 button with a tooltip will look like the below:
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Sample tooltip text">Hover Me!</button>
And its generated tooltip will look as below:
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Sample tooltip text
</div>
</div>
As you may notice, the tooltip markups in the two Bootstrap versions look identical except for the classes "arrow" and "tooltip-arrow". Therefore, the only part that differs in styling colors between the two versions is the arrow part.
The class "bs-tooltip-top" is a result of using "top" as the placement for the two tooltips. It's generated based on the direction/placement of the tooltip.
To change the text or background color of the tooltip in any Bootstrap version, we use the tooltip-inner class as the selector and style as any other element in CSS.
.tooltip-inner {
background-color: #44037a;
color: lightcyan;
}
You will however note that though the above changes the tooltip text and background color, the arrow retains its original black color. To change this, we will use the arrow or tooltip-arrow classes for Bootstrap 4 and Bootstrap 5 respectively together with the placement and CSS pseudo-class ::before.
The CSS border-x-color property is used to style the arrow color where "x" is the position of the tooltip (top, bottom, right, or left).
For instance, to change the arrow color of a tooltip that is positioned at the right to purple in Bootstrap 5, use the CSS code below:
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
border-right-color: purple;
}
The equivalent of the above code in Bootstrap 4 is as below:
.tooltip.bs-tooltip-right .arrow:before {
border-right-color: purple;
}
It is not possible to style the color of arrows on all tooltip directions at once. So if tooltips on your page are positioned in different directions, you will need to style the color of each direction individually.
To change the color of text, background, and arrow in Bootstrap 5 tooltips for all directions, simply use the CSS code below and replace the color values with your preferred ones.
.tooltip-inner {
background-color: #44037a;
color: cyan;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
border-top-color: #44037a;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
border-right-color: #44037a;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
border-bottom-color: #44037a;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
border-left-color: #44037a;
}
To change the color of text, background, and arrow in Bootstrap 4 tooltips for all directions, simply use the CSS code below.
.tooltip-inner {
background-color: #44037a;
color: lightcyan;
}
.tooltip.bs-tooltip-top .arrow:before {
border-top-color: #44037a;
}
.tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #44037a;
}
.tooltip.bs-tooltip-right .arrow:before {
border-right-color: #44037a;
}
.tooltip.bs-tooltip-left .arrow:before {
border-left-color: #44037a;
}
That's it!
Now you know how to change the default Bootstrap Tooltips colors and customize them to your own liking.
