Skip to content

Bootstrap Tooltips Explained — Hover Information Popups

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Tooltips Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap tooltips display small informational popups on hover or focus, requiring JavaScript initialization with options for placement, HTML content, and custom triggers.

What You'll Learn

  • Tooltip initialization
  • Placement options
  • HTML content
  • Custom triggers
  • Disabled element tooltips

Why It Matters

Tooltips provide contextual help without cluttering the interface. Bootstrap tooltips are lightweight and accessible with keyboard and screen reader support.

<div class="container mt-4">
  <p>
    Hover over the buttons below to see tooltips:
  </p>

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

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

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

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

  <button type="button" class="btn btn-secondary me-2"
    data-bs-toggle="tooltip" data-bs-html="true"
    title="Tooltip with <strong>HTML</strong> <em>content</em>">
    HTML Tooltip
  </button>

  <button type="button" class="btn btn-secondary me-2"
    data-bs-toggle="tooltip" data-bs-trigger="focus"
    title="Focus to show, blur to hide">
    Focus Trigger
  </button>

  <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip"
    title="Disabled tooltip">
    <button class="btn btn-primary" type="button" disabled>
      Disabled Button
    </button>
  </span>
</div>

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

Expected output: Five tooltip buttons showing in different positions on hover, plus HTML content, focus trigger, and disabled element tooltip.

← Previous Bootstrap Progress Explained — Progress Bar Component Next → Bootstrap Popovers Explained — Rich Information Popups

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap