Bootstrap UI Kit

Top Tooltip

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

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

Bottom Tooltip

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip on bottom">
    Hover me
</button>

Left Tooltip

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip on left">
    Hover me
</button>

Right Tooltip

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip on right">
    Hover me
</button>

HTML Tooltip

<button type="button" class="btn btn-dark"
        data-bs-toggle="tooltip" data-bs-html="true"
        title="<b>Bold</b> and <i>italic</i> supported">
    Hover me
</button>

Disabled Element Tooltip

<span class="d-inline-block" tabindex="0"
      data-bs-toggle="tooltip" title="Disabled tooltip">
    <button class="btn btn-secondary" style="pointer-events:none;" disabled>
        Disabled button
    </button>
</span>

Tooltips