---
components: ["Popover", "PopoverContent"]
---

<script>
  import { Button, Popover, PopoverContent } from "carbon-components-svelte";
  import FavoriteFilled from "carbon-icons-svelte/lib/FavoriteFilled.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

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

<Popover open>
    <div data-outline>
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    </div>
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>

## Close on outside click

Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.

<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
    <div data-outline>
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    </div>
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>

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

<Popover open align="top-left">
    <div data-outline>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
</div>
<PopoverContent>
    <p>Top-left alignment</p>
</PopoverContent>
</Popover>

<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="top-right">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Top-right alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="bottom">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Bottom alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="bottom-left">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Bottom-left alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="left">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Left alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="left-bottom">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Left-bottom alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="left-top">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Left-top alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="right">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Right alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="right-bottom">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Right-bottom alignment</p>
        </PopoverContent>
    </Popover>
</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
    <Popover open align="right-top">
        <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
        <PopoverContent>
            <p>Right-top alignment</p>
        </PopoverContent>
    </Popover>
</div>

## With caret

<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover caret open>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</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 style="width:100%;padding:1em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover caret align="right-top" open>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>
</div>

## Light variant

<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover light open>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>
</div>

## High contrast variant

<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover highContrast open>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>
</div>

## Drop shadow

<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover dropShadow open>
    <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
    <PopoverContent>
        <h6>Available storage</h6>
        <p>This server has 150 GB of block storage remaining.</p>
    </PopoverContent>
</Popover>
</div>

## External element

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

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