Popover

Installation

Barrel

import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverRoot, PopoverTitle, PopoverTrigger } from 'kumo-svelte';

Granular

import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverRoot, PopoverTitle, PopoverTrigger } from 'kumo-svelte/components/popover';

Usage

<script>  import { Button, Popover } from "kumo-svelte";</script><Popover.Root>  <Popover.Trigger>    {#snippet child({ props })}      <Button {...props}>Open</Button>    {/snippet}  </Popover.Trigger>  <Popover.Content>    <Popover.Title>Popover Title</Popover.Title>    <Popover.Description>Popover content goes here.</Popover.Description>  </Popover.Content></Popover.Root>

While popovers can be triggered on hover (using openOnHover), they serve a different purpose than tooltips. Understanding when to use each is important for accessibility and user experience.

	Tooltip	Popover
Purpose	Short, non-interactive text labels for identification	Rich, interactive content containers
Content	Plain text only	Any content: links, buttons, forms, images
Trigger	Hover or focus	Click (default) or hover
ARIA Role	`role="tooltip"`	`aria-haspopup`
Keyboard	Not focusable	Focus moves inside, traps when open

Use a Tooltip when you need to label an icon button or provide a brief explanation. Use a Popover when users need to interact with the content inside, such as clicking links, filling out forms, or dismissing with a button.

Examples

With Close Button

Positioning

Use the side prop to control where the popover appears relative to the trigger.

Custom Content

Popovers can contain any content, including custom layouts with avatars, buttons, and more.

Open on Hover

Use openOnHover on the trigger to open the popover when the user hovers over it. You can also specify a delay in milliseconds before the popover appears.

Virtual Anchor

Use the anchor prop on Popover.Content to position the popover against an element other than the trigger, or against a virtual point (e.g., a DOMRect from getBoundingClientRect()). This is useful when the trigger and the desired anchor are in different component trees.

API Reference

The root component that manages the popover's open state.

Prop	Type	Default	Description
open	`boolean`	-	Controlled open state.
defaultOpen	`boolean`	`false`	Initial open state for uncontrolled usage.
onOpenChange	`(open: boolean) => void`	-	Called when the open state changes.
modal	`boolean`	`false`	Whether the popover is modal.

Popover.Trigger

A button that opens the popover when clicked. Use a render prop to render your own element.

Prop	Type	Default	Description
child	`Snippet<[{ props: Record<string, unknown> }]>`	-	Custom trigger render target.

The container for popover content. Controls positioning via side, align, sideOffset, and alignOffset props. Use the anchor prop to position against a custom element or virtual point instead of the trigger. Use positionMethod="fixed" when the popover needs to escape stacking contexts, such as when inside sticky headers.

Prop	Type	Default	Description
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`"bottom"`	Preferred side of the trigger.
anchor	`HTMLElement \| { getBoundingClientRect: () => DOMRect } \| null`	-	Element or virtual element to position the popover against.
align	`'start' \| 'center' \| 'end'`	`"center"`	Alignment relative to the anchor.
sideOffset	`number`	`0`	Distance from the anchor side.
alignOffset	`number`	`0`	Offset along the alignment axis.
positionMethod	`'absolute' \| 'fixed'`	`"absolute"`	CSS positioning strategy.
container	`HTMLElement \| string`	`document.body`	Portal container for custom roots or Shadow DOM.

A heading that labels the popover for accessibility.

Prop	Type	Default	Description
No component-specific props. Accepts standard HTML attributes.

A paragraph providing additional context about the popover content.

Prop	Type	Default	Description
No component-specific props. Accepts standard HTML attributes.

A button that closes the popover when clicked. Use a render prop to render your own element.

Prop	Type	Default	Description
child	`Snippet<[{ props: Record<string, unknown> }]>`	-	Custom close render target.

Kumo Svelte