Bootstrap Tooltip

A Tooltip is a small pop-up box that appears when the user moves the mouse pointer over an element, or when an element receives keyboard focus. Tooltips are excellent for providing brief, helpful context without cluttering the screen.

Initialization Required

Unlike many other Bootstrap components, Tooltips are computationally expensive. For performance reasons, they are strictly opt-in. This means you must initialize them yourself using JavaScript before they will appear on your page.

To enable all tooltips on a page at once, include this snippet in your JavaScript file or at the bottom of your HTML document:

<script>
    // Wait until the DOM is fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

Basic Tooltip

To create a tooltip, simply add data-bs-toggle="tooltip" to an element. The text that appears inside the tooltip is pulled directly from the standard HTML title attribute.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Hello, I am a basic tooltip!">
    Hover over me!
</button>

Tooltip Placement

By default, tooltips appear right on top of their parent element. You can easily control the tooltip's placement (Top, Right, Bottom, Left) using the data-bs-placement attribute.

<!-- Top -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">...</button>

<!-- Right -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">...</button>

<!-- Bottom -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">...</button>

<!-- Left -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">...</button>

Custom HTML inside Tooltips

By default, tooltips treat their content as raw text. To render HTML tags (like bold text or italics) inside your tooltip, you must include the data-bs-html="true" attribute.

<!-- Notice data-bs-html="true" is set -->
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <b>with HTML</b>">
    Tooltip with HTML
</button>