@aria-ui/popover
Advanced tools
data-align
Type: "center" | "start" | "end"
data-mounted
Type: ""
data-side
Type: "bottom" | "left" | "right" | "top"
data-state
Type: "open" | "closed"
escapeKeyDown
Fired when the escape key is pressed.
By default, the popover will be closed. It can be prevented by calling preventDefault().
Type: EscapeKeyDownEvent
focusOutside
Fired when the focus is moved outside the element.
By default, the popover will be closed. It can be prevented by calling preventDefault().
Type: FocusOutsideEvent
interactOutside
Fired when an interaction (pointer or focus) happens outside the component.
By default, the popover will be closed. It can be prevented by calling preventDefault().
Type: InteractOutsideEvent
pointerDownOutside
Fired when the pointer is pressed down outside the element.
By default, the popover will be closed. It can be prevented by calling preventDefault().
Type: PointerDownOutsideEvent
altBoundary
Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.
Type: boolean
Default: false
autoUpdate
Options to activate auto-update listeners
Type: boolean | AutoUpdateOptions
See
https://floating-ui.com/docs/autoUpdate
Default: true
boundary
Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
Type: Boundary
Default: 'clippingAncestors'
elementContext
The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.
Type: ElementContext
Default: 'floating'
fitViewport
Whether to constrain the floating element's width and height to not exceed the viewport.
Type: boolean
Default: false
flip
Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.
Type: boolean | Placement[]
Default: true
hide
Whether to hide the floating element when the reference element or the floating element is fully clipped.
Type: boolean
Default: false
hoist
Whether to use the browser Popover API to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's <Portals> or Vue's <Teleport>.
Type: boolean
Default: true
inline
Whether to improve positioning for inline reference elements that span over multiple lines.
Type: boolean
Default: false
offset
The distance between the reference and floating element.
Type: OffsetOptions
Default: 6
overflowPadding
Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
Type: number
Default: 4
overlap
Whether the floating element can overlap the reference element to keep it in view.
Type: boolean
Default: false
placement
The initial placement of the floating element
Type: Placement
Default: "top"
rootBoundary
Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
Type: RootBoundary
Default: 'viewport'
sameHeight
Whether to constrain the floating element's height so that it matches the reference element.
Type: boolean
Default: false
sameWidth
Whether to constrain the floating element's width so that it matches the reference element.
Type: boolean
Default: false
shift
Whether the floating element should shift to keep it in view.
Type: boolean
Default: true
strategy
The strategy to use for positioning
Type: "fixed" | "absolute"
Default: "absolute"
transform
Whether to use CSS transforms to position the floating element instead of layout (top and left CSS properties). CSS transforms are more performant, but can cause conflicts with transform animations.
Type: boolean
Default: false
openChange
Type: CustomEvent<boolean>
defaultOpen
Whether the popover is open by default.
Type: boolean
Default: false
open
Whether the popover is open.
Type: boolean
Default: false
Type: CustomEvent<{ originalEvent: KeyboardEvent }>
Type: EventDeclarations<PopoverRootEvents>
FAQs
## PopoverContentDataAttributes #
We found that @aria-ui/popover demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
