`Popover` provides a floating container that displays content relative to a trigger element. It supports various alignments, caret indicators, and visual variants. ## Default Create a basic popover with absolute positioning.

Parent

Content

## Relative position Set `relative` to `true` to position the popover relative to its parent element.

Parent

Content

## Close on outside click Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.

Parent {console.log('on:click:outside')}}>

Content

Parent

top-left

Parent

top-right

Parent

bottom

Parent

bottom-left

Parent

bottom-right

Parent

left

Parent

left-bottom

Parent

left-right

Parent

right

Parent

right-bottom

Parent

right-top

## With caret Add a caret indicator to the popover using the `caret` prop.

Parent

Content

## Custom caret alignment By default, the caret is aligned "top". Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.

Parent

Content

## Light variant Enable the light variant for use on dark backgrounds.

Parent

Content

## High contrast variant Enable the high contrast variant for improved visibility.

Parent

Content

## External element Use the `open` prop to manage state with an external element, like a button.