Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize Bootstrap tooltips to change their color and size?
Asked on Mar 16, 2026
Answer
To customize Bootstrap tooltips, you can use custom CSS to change their color and size. Bootstrap tooltips are styled using the `.tooltip` class, and you can override these styles in your own stylesheet.
<!-- BEGIN COPY / PASTE -->
<style>
.custom-tooltip .tooltip-inner {
background-color: #5a5a5a; /* Change background color */
color: #ffffff; /* Change text color */
font-size: 1.2rem; /* Change font size */
}
.custom-tooltip .arrow::before {
border-top-color: #5a5a5a; /* Change arrow color */
}
</style>
<button type="button" class="btn btn-secondary custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Custom tooltip">
Hover me
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `.custom-tooltip` class is added to the button to apply the custom styles only to specific tooltips.
- The `.tooltip-inner` class is used to style the tooltip's content area.
- The `.arrow::before` selector is used to change the color of the tooltip's arrow.
- Ensure that your custom CSS is loaded after Bootstrap's CSS to override the default styles.
Recommended Links:
