carbon-components-svelte/docs/src/pages/components/Popover.svx

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

## Default

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

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

## Relative position

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

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

## Close on outside click

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

<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

<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

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

## High contrast variant

<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" />