Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize Bootstrap tooltips to fit a dark theme?
Asked on Jan 24, 2026
Answer
To customize Bootstrap tooltips for a dark theme, you can use custom CSS to override the default tooltip styles. Below is an example of how to achieve this using Bootstrap 5.
<!-- BEGIN COPY / PASTE -->
<style>
.tooltip-inner {
background-color: #333; /* Dark background */
color: #fff; /* Light text color */
border: 1px solid #444; /* Optional border */
}
.tooltip-arrow::before {
border-top-color: #333;
border-bottom-color: #333;
}
</style>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark themed 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 `.tooltip-inner` class is used to style the tooltip's content.
- The `.tooltip-arrow::before` pseudo-element is used to style the arrow of the tooltip.
- Ensure you include the Bootstrap JavaScript to initialize tooltips.
- You can adjust the colors to fit your specific dark theme requirements.
Recommended Links:
