Popover
Semantic popover built on Tooltip and Anchor
Popover
TxPopover wraps TxTooltip for trigger semantics while TxBaseAnchor handles positioning, collision, and motion.
Popover panels use TxCard; use panelVariant/panelBackground/panelShadow/panelRadius/panelPadding to control border, background, and shadow. keepAliveContent controls whether inner state is preserved after close.
Basic Usage
Popover
Demo loads on client.
Visual Effects (split / fusion / mask)
Popover (visual effects)
Demo loads on client.
API
TxPopover Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | - | Open state (v-model) |
disabled | boolean | false | Disable interaction |
placement | PopoverPlacement | 'bottom-start' | Floating placement |
offset | number | auto | Gap (computed from arrowSize when arrow is enabled; otherwise 2) |
width | number | 0 | Panel width (0 follows reference width) |
minWidth | number | 0 | Minimum panel width |
maxWidth | number | 360 | Maximum panel width |
referenceFullWidth | boolean | false | Stretch reference container to full width |
showArrow | boolean | true | Show arrow |
arrowSize | number | 12 | Arrow size |
trigger | 'click' | 'hover' | 'click' | Trigger mode |
openDelay | number | 120 | Hover open delay (ms) |
closeDelay | number | 100 | Hover close delay (ms) |
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 |
closeOnClickOutside | boolean | true | Close on outside click (click trigger only) |
closeOnEsc | boolean | true | Close on ESC |
Events
| Event | Params | Description |
|---|---|---|
open | - | Description for open. |
close | - | Description for close. |
update:modelValue | boolean | Description for update:modelValue. |
Was this helpful?