Popover
Semantic popover built directly on BaseAnchor.
Usage
Popover
Loading demo...
Best Practices
- Keep popover content short: explanations, compact filters, and one or two lightweight actions.
- Use
toggleOnReferenceClick=falsewhen the reference contains an input or custom focus behavior, asTxSearchSelectdoes. - Leave
keepAliveContent=truefor small forms or stateful filters; set it tofalseonly for static copy. - Use
maxHeightor internal scrolling for option panels instead of allowing a popover to cover the viewport. - There is no arrow by default. Turn on
showArrowonly when several triggers sit close together and the panel has to show which one it belongs to; withoffsetunset, the gap grows to fit the arrow.
API Reference
TxPopover Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | - | Open state (v-model) |
disabled | boolean | false | Disable interaction |
eager | boolean | false | Mounts anchor content eagerly through TxBaseAnchor. |
placement | PopoverPlacement | 'bottom-start' | Floating placement |
offset | number | auto | Gap: 6 without an arrow (matching DropdownMenu and Select), max(8, arrowSize / 2 + 2) with one |
width | number | 0 | Panel width (0 follows reference width) |
minWidth | number | 0 | Minimum panel width |
maxWidth | number | 360 | Maximum panel width |
maxHeight | number | 420 | Maximum panel height before internal overflow handling. |
unlimitedHeight | boolean | false | Disables the max-height cap for panels that manage their own scrolling. |
referenceFullWidth | boolean | false | Stretch reference container to full width |
referenceClass | BaseAnchorClassValue | - | Additional class value forwarded to the BaseAnchor reference wrapper. |
showArrow | boolean | false | Show arrow. The anchor family draws no arrow by default; opt in per instance |
arrowSize | number | 12 | Arrow size |
trigger | 'click' | 'hover' | 'click' | Trigger mode |
openDelay | number | From the menu preset (120) | Hover open delay (ms). Left unset, the shared delay service supplies it. |
closeDelay | number | From the menu preset (100) | Hover close delay (ms). Left unset, the shared delay service supplies it. |
animation | BaseAnchorAnimationOptions | { type: 'expand' } | Anchor animation config forwarded to BaseAnchor; spring expand by default — classic types (transfer etc.) get duration: 180 / ease: 'power2.out' injected. |
keepAliveContent | boolean | true | Keep floating content mounted between open/close |
toggleOnReferenceClick | boolean | trigger === 'click' | Toggle by clicking reference |
panelVariant | 'solid' | 'dashed' | 'plain' | 'solid' | Card border variant |
panelBackground | 'pure' | 'mask' | 'blur' | 'glass' | 'refraction' | 'refraction' | Card background style |
panelShadow | 'none' | 'soft' | 'medium' | 'soft' | Card shadow style |
panelRadius | number | 18 | Card radius |
panelPadding | number | 10 | Card padding |
panelCard | BaseAnchorPanelCardProps | - | Advanced override object forwarded to the BaseAnchor panel card. |
closeOnClickOutside | boolean | true | Close on outside click (click trigger only) |
closeOnEsc | boolean | true | Close on ESC |
Events
| Event | Params | Description |
|---|---|---|
open | - | Emitted when uncontrolled or internal state opens. |
close | - | Emitted when uncontrolled or internal state closes. |
update:modelValue | boolean | Emitted whenever Popover requests a controlled or uncontrolled open state change. |
Slots
| Slot | Props | Description |
|---|---|---|
reference | - | Trigger/reference content rendered inside the anchor reference wrapper. |
default | { side: string } | Popover panel content. side is the resolved floating side from TxBaseAnchor. |
Trigger And Panel Behavior
Popover (trigger and panel)
Loading demo...
Dashboard Navigation Composition
Admin pages should not put every setting into one large form. Use TxTabs for first-level sections, TxDropdownMenu for lightweight actions in the current section, TxPopover for short explanations, and TxDrawer for dense configuration.
Dashboard navigation shell
A screenshot-verified Tabs / DropdownMenu / Popover / Drawer composition for Dashboard settings pages.
Loading demo...
Overview
- With
trigger="click", outside-click and Escape closing are available; withtrigger="hover", open/close delays apply, and the trip to the panel is covered by the hover bridge and the safe triangle (rules in Tooltip's Overview): crossing theoffsetgap, resting on the panel's padding, or passing another hover trigger diagonally neither closes the panel nor hands it away. - Use
keepAliveContentfor filters, short forms, and stateful explanation panels; disable it for pure display copy when state does not matter. - Popover should stay lightweight; upgrade to Drawer for one-screen-plus content, footer actions, or multi-field configuration.
Technologies
- Reviewed against
packages/tuffex/packages/components/src/popover/src/types.ts,TxPopover.vue, andpopover.test.ts. - With
offsetunset, the gap is 6px without an arrow and derived fromarrowSizewith one; examples should not imply a fixed default gap. - Rejected design: keeping the old 2px no-arrow gap once the arrow went off by default. Measured, the panel's top edge sat 1.8px from the trigger, over the trigger's 3px focus outline, so it uses the menu family's 6px instead.
closeOnClickOutsideis click-trigger only because hover mode owns close timing through pointer/focus leave delays.- Component source:
packages/tuffex/packages/components/src/popover/src/TxPopover.vue. - Types:
packages/tuffex/packages/components/src/popover/src/types.ts. - Verified coverage:
packages/tuffex/packages/components/src/popover/__tests__/popover.test.tsverifies default BaseAnchor prop forwarding (no arrow by default), offset derivation (6 without an arrow, 8 with the default arrow, a custom arrow size, an explicit value), hover trigger timing, the hover zone spanning the whole floating layer (leaving the content for the card padding does not close), disabled-close behavior, full-width reference classes, and content side slot props.
查看源码
packages/tuffex/packages/components/src/popover/index.ts