How can I add tooltips to Bootstrap buttons with icons to improve accessibility?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I add tooltips to Bootstrap buttons with icons to improve accessibility?

Asked on Jan 02, 2026

Answer

To add tooltips to Bootstrap buttons with icons, you can use Bootstrap's built-in tooltip component. This improves accessibility by providing additional context for screen readers and users who hover over the icons.

<!-- BEGIN COPY / PASTE -->
        <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip text">
            <i class="bi bi-info-circle"></i>
        </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:

Ensure you have included Bootstrap's JavaScript and CSS files in your project.
Use the `data-bs-toggle="tooltip"` attribute to enable the tooltip on the button.
The `title` attribute contains the text that will be displayed in the tooltip.
Initialize tooltips using JavaScript to activate them on the page.
The `` is an example of using Bootstrap Icons for the button.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I add tooltips to Bootstrap buttons with icons to improve accessibility?

Asked on Jan 02, 2026

Answer

The Q&A Network