<script>
  import { Popover } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`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.

<div data-outline>
    Parent
    <Popover open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## Relative position

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

<div data-outline>
    Parent
    <Popover relative open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## Close on outside click

Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.

<div data-outline>
    Parent
    <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## 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"`.

<div data-outline>
    Parent
    <Popover open align="top-left">
        <div style="padding: var(--cds-spacing-05)">top-left</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="top-right">
        <div style="padding: var(--cds-spacing-05)">top-right</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="bottom">
        <div style="padding: var(--cds-spacing-05)">bottom</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="bottom-left">
        <div style="padding: var(--cds-spacing-05)">bottom-left</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="bottom-right">
        <div style="padding: var(--cds-spacing-05)">bottom-right</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="left">
        <div style="padding: var(--cds-spacing-05)">left</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="left-bottom">
        <div style="padding: var(--cds-spacing-05)">left-bottom</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="left-right">
        <div style="padding: var(--cds-spacing-05)">left-right</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="right">
        <div style="padding: var(--cds-spacing-05)">right</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="right-bottom">
        <div style="padding: var(--cds-spacing-05)">right-bottom</div>
    </Popover>
</div>
<div data-outline>
    Parent
    <Popover open align="right-top">
        <div style="padding: var(--cds-spacing-05)">right-top</div>
    </Popover>
</div>

## With caret

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

<div data-outline>
    Parent
    <Popover caret open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## 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"`.

<div data-outline>
    Parent
    <Popover caret align="top-left" open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## Light variant

Enable the light variant for use on dark backgrounds.

<div data-outline>
    Parent
    <Popover light open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## High contrast variant

Enable the high contrast variant for improved visibility.

<div data-outline>
    Parent
    <Popover highContrast open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
</div>

## External element

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

<FileSource src="/framed/Popover/WithButton" />