Default

The Popover is a UI element that shows content near a reference when triggered, used for extra information or input, structured for composition and encapsulation of UI elements. Within this structure:

<Popover> acts as the container component that wraps the entire popover functionality, ensuring that all its nested components work together to provide the popover behavior.
<Popover.Trigger> is the component that acts as the trigger for the popover. This trigger inherits all properties the Button component. Other components can be used as trigger.
<Popover.Content> contains the actual content displayed within the popover. This is the section that becomes visible when the popover is activated (i.e., when the trigger is clicked). It can contain any type of content, including text, images, links, or other interactive elements.

The overall structure is designed to provide a flexible and accessible way to implement a popover UI pattern, with a clear separation of concerns: the trigger for user interaction and the content to be displayed upon interaction.

<Popover>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Content>
		This is the content of the popover. It can contain text, links, images, etc.
	</Popover.Content>
</Popover>

Multiple Triggers

Multiple triggers can be applied

<Popover openOnMouseEnter={true} closeOnMouseLeave={true}>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Trigger>Popover</Popover.Trigger>
	<Popover.Content>
		This is the content of the popover. It can contain text, links, images, etc.
	</Popover.Content>
</Popover>

Custom Trigger

There is no need for <Popover.Trigger>; other components can be used instead. Propagate the action accordingly.

<Popover>
	{#snippet children(triggerAction)}
		<Button family="outline" use={[[triggerAction]]}>Popover</Button>
		<Popover.Content>
			This is the content of the popover. It can contain text, links, images, etc.
		</Popover.Content>
	{/snippet}
</Popover>

API Reference

Popover.Root

The root component is responsible for managing the popover's state.

Property	Type	Description
`openOnMouseEnter`	`boolean`	Open the popover on mouse enter. `Default: false`
`openOnFocus`	`boolean`	Open the popover on focus. `Default: false`
`closeOnClick`	`boolean`	Close the popover on click. Always `false` when openOnMouseEnter is `true`. `Default: true`
`closeOnMouseLeave`	`boolean`	Close the popover on mouse leave. `Default: false`
`closeOnOutsideClick`	`boolean`	Close the popover on outside click. `Default: true`
`closeOnEscape`	`boolean`	Close the popover when pressing the escape key. `Default: true`
`groupTriggers`	`boolean`	When the `closeOnMouseLeave` option is set to `true`, the system calculates the external boundaries of the triggers grouped together, assuming that these triggers are arranged in a rectangular layout. `Default: true`
`renderContent`	`boolean`	If `renderContent` is `true`, popover content is always rendered, otherwise, it's not rendered when invisible. `Default: false`
`closeOthers`	`boolean`	If `closeOthers` is `true`, other popovers are closed when this one is opened. `Default: false`
`disableOthers`	`boolean`	If `disableOthers` is `true`, other popovers are disabled when this one is opened. `Default: false`