Modals, Tooltips and Popovers

Overlays let you show content on demand without leaving the page: modals for dialogs, tooltips for hints, popovers for richer floating panels. All three are powered by data attributes and the Bootstrap JavaScript bundle. This lesson explains how each works, when to initialize them manually, and the accessibility rules that keep them usable.

Modals

A modal is a dialog layered over a dimmed backdrop. It needs two pieces: a trigger and the modal markup itself.

html

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmModal">Delete item</button>

<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmLabel">Confirm deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">This action cannot be undone. Continue?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

Useful options: modal-dialog-centered for vertical centering, modal-lg/modal-sm/modal-xl for sizing, modal-dialog-scrollable for long content, and data-bs-backdrop="static" to prevent closing by clicking outside, which suits unsaved-changes dialogs. You can also control modals from JavaScript:

const modal = new bootstrap.Modal("#confirmModal");
modal.show();

Tooltips

Tooltips show a short label on hover or focus. Unlike most components, they are opt-in and must be initialized:

html

<button class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">Copy</button>
<script>
  document.querySelectorAll("[data-bs-toggle=tooltip]")
    .forEach(el => new bootstrap.Tooltip(el));
</script>

Set direction with data-bs-placement (top, bottom, start, end). Keep tooltip text short; it disappears on mouse-out and cannot contain interactive elements. Because tooltips also open on keyboard focus, they remain accessible to non-mouse users.

Popovers

Popovers are tooltips with a title and a body, shown on click by default. They also require initialization:

html

<button class="btn btn-info" data-bs-toggle="popover" data-bs-title="Pro tip"
        data-bs-content="You can pin lessons to your dashboard from here.">Help</button>
<script>
  document.querySelectorAll("[data-bs-toggle=popover]")
    .forEach(el => new bootstrap.Popover(el));
</script>

Use data-bs-trigger="focus" for dismiss-on-blur behavior, which is the most user-friendly option for one-off hints because clicking anywhere else closes the popover.

Choosing the Right Overlay

Tooltip: one short line clarifying an icon or button.
Popover: a paragraph of contextual help with a heading.
Modal: anything requiring a decision or form input; it traps focus until dismissed.

Avoid nesting overlays (a popover opening a modal is fine; a modal opening a tooltip inside another modal is not) and never put critical content only in a tooltip.

Key Takeaways

Modals pair a data-bs-toggle="modal" trigger with matching markup and can be driven from JS.
Static backdrops protect unsaved work; size and centering classes tune the dialog.
Tooltips and popovers must be initialized manually with new bootstrap.Tooltip/Popover.
Pick the lightest overlay that does the job, and keep tooltips text-only.

Next lesson: Tables, Badges, Alerts and Progress Bars for presenting data and status.