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 tw-btn-icon tw-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="tw-btn tw-btn-icon tw-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="tw-btn tw-btn-secondary tw-btn-icon" aria-label="More actions"><i class="fa-solid fa-ellipsis"></i></button><button class="tw-btn tw-btn-secondary">Actions <i class="fa-solid fa-angle-down"></i></button><button class="tw-btn tw-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="tw-popover-body"><label class="tw-form-label">...</label><select class="tw-form-select">...</select></div><div class="tw-popover-footer"><button class="tw-btn tw-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="tw-popover tw-popover-bottom tw-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: