OVERLAYS: Anchored, dismissible content layers
VARIANTS: Popover | Tooltip
Consolidated entry for the two lightweight anchored overlays. Popover holds rich interactive content; Tooltip shows a short hint on hover/focus. (Modal Popup and Drawer remain separate entries — different interaction models.)
POPOVER: Click-triggered floating panel anchored to a trigger element
PLACEMENTS: Top | Bottom | Left | Right
VARIANTS: Info | Menu | Form
SIZES: Small | Default | Large
Use popovers to show contextual content without navigating away from the current view. They sit between tooltips (hover, text-only) and popups (modal, blocks interaction). Opens on click, closes on outside click or Escape key. Requires Stimulus controller.
Info variant: A minimal icon trigger (.btn btn-icon btn-tertiary) that opens
a popover with informational text. Transparent background with subtle hover feedback via the
existing button system. Single icon per trigger.
<button class="btn btn-icon btn-tertiary" aria-label="More info"><i class="fa-solid fa-circle-info"></i></button>
Placements: Control where the popover appears using
data-popover-placement-value. Options: top,
bottom (default), left, right.
The arrow automatically points back to the trigger. Popovers auto-flip
if they would overflow the viewport.
<div data-controller="popover" data-popover-placement-value="left">...</div>
Menu variant: A button trigger that opens a list of actions with icons.
Three trigger styles shown below: icon-only, text with trailing chevron, and
leading icon with label and trailing chevron. All use existing .btn classes.
<button class="btn btn-secondary btn-icon" aria-label="More actions"><i class="fa-solid fa-ellipsis"></i></button><button class="btn btn-secondary">Actions <i class="fa-solid fa-angle-down"></i></button><button class="btn btn-secondary"><i class="fa-solid fa-file-export"></i> Export <i class="fa-solid fa-angle-down"></i></button>
Form variant: A popover containing a mini inline form for quick data entry.
Uses existing form components (.form-label, .form-select) inside
the popover body, with action buttons in .popover-footer.
<div class="popover-body"><label class="form-label">...</label><select class="form-select">...</select></div><div class="popover-footer"><button class="btn btn-sm">...</button></div>
Combined demo: Three triggers in a row demonstrating info (top placement), menu (bottom placement), and form (right placement) popover variants side by side.
Sizes: Add .popover-sm or .popover-lg to the
popover panel to control width. Default is medium (240–320px).
<div class="popover popover-bottom popover-sm">...</div>
Accessibility: Popovers support Escape to close, focus moves
into the panel on open and returns to the trigger on close. The trigger uses
aria-expanded and aria-haspopup, the panel uses
role="dialog" (or role="menu" for action lists) and
aria-hidden. Click outside or press Escape to dismiss.
Tab to the button below, press Enter/Space to open, Escape to close:
TOOLTIP: Informational overlay that appears on hover or keyboard focus
PLACEMENTS: Top | Bottom | Left | Right
ALIGNMENTS: Start | Center | End
SIZES: Small | Default | Large
Use tooltips to provide brief, supplementary descriptions for UI elements. They appear on hover and keyboard focus, and auto-reposition when near viewport edges. Requires Stimulus controller.
Default: Tooltip appears above the element, centred. Add
data-controller="tooltip" and data-tooltip-content-value to any element.
<button class="btn btn-primary" data-controller="tooltip" data-tooltip-content-value="Save your changes">Save</button>
Placements: Control where the tooltip appears relative to its trigger using
data-tooltip-placement-value. Options: top (default), bottom,
left, right.
<button data-controller="tooltip" data-tooltip-content-value="..." data-tooltip-placement-value="bottom">...</button>
Alignment: Fine-tune positioning along the cross axis using
data-tooltip-align-value. Options: start, center (default),
end. Works with all placements.
<button data-controller="tooltip" data-tooltip-content-value="..." data-tooltip-placement-value="right" data-tooltip-align-value="start">...</button>
Sizes: Use data-tooltip-size-value to control tooltip size.
Options: sm (compact), default, lg (prominent).
<button data-controller="tooltip" data-tooltip-content-value="..." data-tooltip-size-value="sm">...</button>
Auto-flip: When a tooltip would overflow the viewport, it automatically flips to the opposite side. Try hovering the buttons near the edges of the preview area. The tooltip also nudges along the cross axis to stay within bounds.
Keyboard: Tooltips appear on keyboard focus (focusin) and dismiss on
blur (focusout) or Escape key. Tab through the elements below to see
tooltips triggered by keyboard focus.
<input class="form-control" data-controller="tooltip" data-tooltip-content-value="...">
Wrapping: Tooltips have a max width of 320px (max-w-xs) and wrap text
automatically. Keep tooltip text concise, but longer descriptions are supported.
Practical uses: Icon-only buttons that need a text label, truncated content that needs the full version, and form fields with supplementary guidance.
<button class="btn btn-icon" aria-label="Settings" data-controller="tooltip" data-tooltip-content-value="Settings">...</button>