component · feedback

TuxPopover

Richer-than-tooltip floating panel — title + body + optional actions. The next tier above TuxTooltip: a panel that can hold a paragraph, a small data block, and one or two action buttons. For onboarding nudges with a dismiss, reach for TuxTeachingPopover; for fully bespoke content shapes, use UPopover directly.

flagship · inspect-and-act

Click trigger with two actions

Default mode="click" because hover-with-actions is bad UX — the panel disappears the moment the user reaches for a button. Click the Status button to open. 

<tux-popover
  title="Drift reconciler"
  body="Closes stale index entries every 30 minutes. Last run 8 min ago — 142 entries reconciled."
>
  <button class="trigger">Status</button>
  <template #actions>
    <button type="button">Run now</button>
    <button type="button" class="tux-popover__action--primary">Settings…</button>
  </template>
</tux-popover>

read-only · hover

Inspect a value without actions

For panels with no buttons, mode="hover" is fine. Use this for inspect / explain patterns — hover or focus the i anchor to reveal the panel.

Stop-line compliance
<tux-popover
  mode="hover"
  title="Stop-line compliance"
  body="Treated sites: 38% over 36-month window. Control: 78%. Effect persisted past the 12-month novelty horizon."
>
  <span class="info-anchor">i</span>
</tux-popover>

structured body · filter

Use the #body slot for richer markup

The body prop covers prose. For lists, data blocks, or form controls, use the #body slot instead — and bump width="lg" if the content wants the room. 

<tux-popover title="Filter by segment" width="lg">
  <button class="trigger">Filter</button>
  <template #body>
    <ul class="space-y-1.5 text-sm">
      <li class="flex items-center justify-between">
        <span>Treatment zone A</span>
        <kbd class="font-mono text-xs">8 sites</kbd>
      </li>
      <li class="flex items-center justify-between">
        <span>Treatment zone B</span>
        <kbd class="font-mono text-xs">4 sites</kbd>
      </li>
      <li class="flex items-center justify-between">
        <span>Control corridors</span>
        <kbd class="font-mono text-xs">12 sites</kbd>
      </li>
    </ul>
  </template>
  <template #actions>
    <button type="button">Clear</button>
    <button type="button" class="tux-popover__action--primary">Apply</button>
  </template>
</tux-popover>

decision tree

Which floating-panel component?

  • Hover hint, no action → TuxTooltip
  • First-run / guided tour → TuxTeachingPopover (has a dismiss + step counter)
  • Persistent inspect / configure panel → TuxPopover (this component)
  • Bespoke content shape → UPopover directly