## Default By default, the position of the popover component is absolute.

Parent

Content

## Relative position Set `relative` to `true` to use a relative position.

Parent

Content

## Close on outside click Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.

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

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

Parent

Content

## High contrast variant

Parent

Content

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