1. framework components
  2. ›
  3. popover

Popover

Small overlay panels positioned relative to a trigger.

Breaking convention in Skeleton, this component is provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

Anchor

Use the Anchor component to position the popover contents relative to an element other than the trigger.

Arrow

Visually connects the popover content to the trigger element. Will automatically align based on the selected side.

Z-Index

By default Skeleton does 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.

Sibling (10)

Provider Pattern

Use the Provider Pattern to gain access to the inner component APIs.

Direction

Set the text direction ( ltr or rtl ) using the dir prop.

Anatomy

Here’s an overview of how the Popover component is structured in code:

svelte 
<script lang="ts">
	import { Popover, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Popover>
	<Popover.Anchor />
	<Popover.Trigger />
	<Portal>
		<Popover.Positioner>
			<Popover.Content>
				<Popover.Title />
				<Popover.Description />
				<Popover.CloseTrigger />
				<Popover.Arrow>
					<Popover.ArrowTip />
				</Popover.Arrow>
			</Popover.Content>
		</Popover.Positioner>
	</Portal>
</Popover>

API Reference

Root

Prop Default Type
translations — IntlTranslations | undefined

Specifies the localized strings that identifies the accessibility elements and their states
ids — Partial<{ anchor: string; trigger: string | ((value?: string | undefined) => 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.
finalFocusEl — (() => MaybeElement) | undefined

Element to receive focus when the popover is closed.
restoreFocus true boolean | undefined

Whether to restore focus to the element that had focus before the popover was 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.
triggerValue — string | null | undefined

The controlled trigger value
defaultTriggerValue — string | null | undefined

The initial trigger value when rendered. Use when you don't need to control the trigger value.
onTriggerValueChange — ((details: TriggerValueChangeDetails) => void) | undefined

Function called when the trigger value changes.
getRootNode — (() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
dir "ltr" "ltr" | "rtl" | undefined

The document's text/writing direction.
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.

Provider

Prop Default Type
value — () => PopoverApi<PropTypes>

children — Snippet<[]> | undefined

The default slot content to be rendered within the component.

Context

Prop Default Type
children — Snippet<[() => PopoverApi<PropTypes>]>

Anchor

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Trigger

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

Positioner

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Content

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Arrow

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ArrowTip

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Title

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Description

Prop Default Type
element — Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

CloseTrigger

Prop Default Type
element — Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself
View page on GitHub