# Popover A component that displays content in a floating panel, triggered by user interaction. ```svelte Trigger Example This is a basic example of a popover. Close ``` ## Arrow You may optionally enable arrows via the `Arrow` and `ArrowTip` component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a `style` attribute. ```svelte Trigger This example will have a small arrow. ``` ## Z-Index By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part. > NOTE: This will need to be forced using `!` for `!important` to override the Zag.js defaults. ```svelte
Default (auto) This example will be below the sibling. Above (20) This example will be above the sibling.
Sibling (10)
``` ## Programmatic Control This is made possible via the Provider Pattern. ```svelte
Anchor This popover will appear, stay open for three seconds, then close on it's own.
``` ## Direction ```svelte Trigger Example This is a basic example of a popover. Close ``` ## Headless Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling. ```svelte
Hello Skeleton ×
Skeleton Gif Three spooky skeletons!
``` The benefits are as follows: * You can make the `Trigger` surround any element, including an icon, button, image, etc. * You can modify the entire structure within `Content`, including custom markup and styling. * You may place the `CloseTrigger` anywhere, and use it as an X close option. ## API Reference | Property | Default | Type | | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. | | ids | - | Partial\<\{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> \| undefined — The ids of the elements in the popover. Useful for composition. | | modal | false | boolean \| undefined — Whether the popover should be modal. When set to \`true\`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover | | portalled | true | boolean \| undefined — Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content. | | autoFocus | true | boolean \| undefined — Whether to automatically set focus on the first focusable content within the popover when opened. | | initialFocusEl | - | (() => HTMLElement \| null) \| undefined — The element to focus on when the popover is opened. | | closeOnInteractOutside | true | boolean \| undefined — Whether to close the popover when the user clicks outside of the popover. | | closeOnEscape | true | boolean \| undefined — Whether to close the popover when the escape key is pressed. | | onOpenChange | - | ((details: OpenChangeDetails) => void) \| undefined — Function invoked when the popover opens or closes | | positioning | - | PositioningOptions \| undefined — The user provided options used to position the popover content | | open | - | boolean \| undefined — The controlled open state of the popover | | defaultOpen | - | boolean \| undefined — The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover. | | getRootNode | - | (() => Node \| ShadowRoot \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | | onEscapeKeyDown | - | ((event: KeyboardEvent) => void) \| undefined — Function called when the escape key is pressed | | onRequestDismiss | - | ((event: LayerDismissEvent) => void) \| undefined — Function called when this layer is closed due to a parent layer being closed | | onPointerDownOutside | - | ((event: PointerDownOutsideEvent) => void) \| undefined — Function called when the pointer is pressed down outside the component | | onFocusOutside | - | ((event: FocusOutsideEvent) => void) \| undefined — Function called when the focus is moved outside the component | | onInteractOutside | - | ((event: InteractOutsideEvent) => void) \| undefined — Function called when an interaction happens outside the component | | persistentElements | - | (() => Element \| null)\[] \| undefined — Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event | | children | - | Snippet\<\[]> \| undefined — The default slot content to be rendered within the component. | | value | - | () => PopoverApi\ | | children | - | Snippet\<\[]> \| undefined — The default slot content to be rendered within the component. | | children | - | Snippet\<\[() => PopoverApi\]> | | element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |