### 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
### Popover alignment Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`. The default `align` value is `"top"`.
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