Bootstrap Tooltips

Overview

Tooltips display informative text when users hover over an element.

Basic Tooltip

<button type="button" class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top"
        data-bs-title="Tooltip text">
    Hover me
</button>

<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

Directions

<button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Top tooltip">Top</button>
<button data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Right tooltip">Right</button>
<button data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom tooltip">Bottom</button>
<button data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Left tooltip">Left</button>

HTML Content

<button data-bs-toggle="tooltip" 
        data-bs-html="true"
        data-bs-title="<em>Italic</em> and <strong>bold</strong>">
    HTML tooltip
</button>

JavaScript API

const tooltip = new bootstrap.Tooltip('#myTooltip');

// Show
tooltip.show();

// Hide
tooltip.hide();

// Toggle
tooltip.toggle();

// Dispose
tooltip.dispose();

Next Steps

Next: Bootstrap Popovers →