What’s the best way to put a tooltip on a disabled button?

Asked on Jul 04, 2025

1 Answer

In Bootstrap 5, tooltips do not work on disabled elements directly. To add a tooltip to a disabled button, you need to wrap the button in a container and apply the tooltip to that container.

<!-- BEGIN COPY / PASTE -->
        <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on disabled button">
            <button class="btn btn-primary" type="button" disabled>Disabled Button</button>
        </div>
        <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:

Wrap the disabled button in a `
` or `` with `data-bs-toggle="tooltip"` and other tooltip attributes.
Initialize the tooltip using JavaScript as shown in the script section.
This approach ensures the tooltip is applied to the wrapper, not the disabled button itself.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions