Bootstrap Tooltips & Popovers — Hover Information Components

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

Bootstrap tooltips show brief text hints on hover. Popovers extend tooltips with title and content sections, requiring initialization via JavaScript.

What You'll Learn

You will learn how to create and initialize tooltips and popovers, configure placement and triggers, set custom HTML content, and handle Accessibility.

Why It Matters

Tooltips and popovers provide contextual information without cluttering the interface. DodaTech's admin panel uses tooltips for icon buttons and popovers for detailed help text.

Real-World Use

Durga Antivirus Pro's scan results use tooltips to explain security terms, and popovers for detailed threat descriptions accessible by clicking a help icon.

flowchart LR
    A[Accordion] --> B[Tooltips & Popovers]
    B --> C[Tooltip Init]
    B --> D[Tooltip Options]
    B --> E[Popover Init]
    B --> F[Popover Options]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Tooltip Initialization

Tooltips require JavaScript initialization because Bootstrap cannot enable them globally for performance reasons:

<p>Hover over this <button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip" data-bs-placement="top"
  title="This is a tooltip">button</button> to see a tooltip.</p>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (el) {
    return new bootstrap.Tooltip(el)
  })
</script>

Expected output: Hovering the button shows a tooltip above it with the text "This is a tooltip".

Tooltip Placements

<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" data-bs-toggle="tooltip"
        data-bs-placement="left" title="Tooltip on left">Left</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(function (el) {
    new bootstrap.Tooltip(el)
  })
</script>

Expected output: Four buttons showing tooltips in different positions (top, right, bottom, left) when hovered.

Tooltip with HTML

<button type="button" class="btn btn-danger" data-bs-toggle="tooltip"
        data-bs-html="true" title="<em>Warning</em>: This action <b>cannot</b> be undone.">
  HTML Tooltip
</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(function (el) {
    new bootstrap.Tooltip(el)
  })
</script>

Expected output: A tooltip with rendered HTML content including italic and bold text.

Popover Initialization

Popovers are initialized similarly to tooltips:

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Popover Title" data-bs-content="This is the popover body content.
        It can contain longer text than a tooltip.">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (el) {
    return new bootstrap.Popover(el)
  })
</script>

Expected output: Clicking the button toggles a popover with a title and body content.

Popover Placements

<button type="button" class="btn btn-secondary me-2" data-bs-toggle="popover"
        data-bs-placement="top" title="Top" data-bs-content="Popover on top">Top</button>
<button type="button" class="btn btn-secondary me-2" data-bs-toggle="popover"
        data-bs-placement="right" title="Right" data-bs-content="Popover on right">Right</button>
<button type="button" class="btn btn-secondary me-2" data-bs-toggle="popover"
        data-bs-placement="bottom" title="Bottom" data-bs-content="Popover on bottom">Bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover"
        data-bs-placement="left" title="Left" data-bs-content="Popover on left">Left</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  popoverTriggerList.forEach(function (el) {
    new bootstrap.Popover(el)
  })
</script>

Expected output: Four buttons with popovers appearing in different positions based on data-bs-placement.

Dismiss on Next Click

<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-bs-toggle="popover"
   data-bs-trigger="focus" title="Dismissible Popover"
   data-bs-content="Click outside this popover to dismiss it.">
  Focus-triggered popover
</a>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  popoverTriggerList.forEach(function (el) {
    new bootstrap.Popover(el)
  })
</script>

Expected output: Clicking the button opens the popover. Clicking anywhere outside the popover closes it.

Common Mistakes

1. Forgetting to Initialize Tooltips/Popovers

Tooltips and popovers do not work without JavaScript initialization. They are opt-in for performance reasons.

2. Not Including Popper.js

Tooltips and popovers require Popper.js for positioning. Use bootstrap.bundle.min.js which includes it.

3. HTML Content Without data-bs-html="true"

HTML tags in title or content render as text by default. Set data-bs-html="true" to enable HTML rendering.

4. Popovers on Disabled Elements

Disabled elements do not fire hover/click events. Wrap them in a container span/div with the popover.

5. Tooltips on Elements That Do Not Support Hover

Mobile devices do not have hover states. Consider using click-triggered popovers instead of hover tooltips for mobile users.

Practice Questions

1. Why do tooltips need JavaScript initialization? Bootstrap disables tooltips globally to avoid performance overhead. You initialize only the tooltips you need.

2. What class does Bootstrap use for positioning tooltips? Popper.js handles positioning. Placement is set via data-bs-placement attribute.

3. How do you enable HTML content in a tooltip? Set data-bs-html="true" on the element.

4. What is the difference between a tooltip and a popover? Tooltips show short text only. Popovers have a title and body, can contain richer content, and toggle on click by default.

5. How do you close a popover when clicking outside? Use data-bs-trigger="focus" on the popover trigger element.

Challenge

Build a help system where each form field has an information icon next to it. Hovering the icon shows a tooltip with a hint. Clicking the icon shows a popover with detailed help documentation.

FAQ

Mini Project

Build a settings form with tooltip help on each field label and a help popover on a question mark icon next to advanced settings. Initialize all tooltips and popovers on page load.

What's Next

Learn Toasts and Alerts for notification messages. Then explore Badges and Progress for status indicators.