Popover

Floating content anchored to a trigger.

Can I tell you a secret?

you're awesome

Props

Features

🌳 Uses native popover attribute, no need for portalling
🧠 Smart focus management, auto-closes when tabbed out
🎈 Fully customize Floating UI’s options
🪺 Nested popovers
🎨 Animation support

Usage

Builder
Component

<script lang="ts">
  import { Popover } from "melt";

  const popover = new Popover();
</script>

<button {...popover.trigger}>
  Click me to open the Popover
</button>
<div {...popover.content}>Content</div>

<script lang="ts">
  import { Popover } from "melt/components";
</script>

<Popover>
  {#snippet children(pinInput)}
    <button {...popover.trigger}>
      Click me to open the Popover
    </button>
    <div {...popover.content}>Content</div>
  {/snippet}
</Popover>

API Reference

Constructor Props

The props that are passed when calling

new Popover()

export type PopoverProps = {
  /**
   * If the Popover is open.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   *
   * @default false
   */
  open?: MaybeGetter<boolean>;

  /**
   * Called when the value is supposed to change.
   */
  onOpenChange?: (value: boolean) => void;

  /**
   * If the popover visibility should be controlled by the user.
   *
   * @default false
   */
  forceVisible?: MaybeGetter<boolean | undefined>;

  /**
   * Options to be passed to Floating UI's `computePosition`
   *
   * @see https://floating-ui.com/docs/computePosition
   */
  computePositionOptions?: MaybeGetter<Partial<ComputePositionConfig> | undefined>;
};

export type PopoverProps = {
  /**
   * If the Popover is open.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   *
   * @default false
   */
  open?: MaybeGetter<boolean>;

  /**
   * Called when the value is supposed to change.
   */
  onOpenChange?: (value: boolean) => void;

  /**
   * If the popover visibility should be controlled by the user.
   *
   * @default false
   */
  forceVisible?: MaybeGetter<boolean | undefined>;

  /**
   * Options to be passed to Floating UI's `computePosition`
   *
   * @see https://floating-ui.com/docs/computePosition
   */
  computePositionOptions?: MaybeGetter<Partial<ComputePositionConfig> | undefined>;
};

Properties

The properties returned from

new Popover()

forceVisible
```
boolean
```
```
boolean
```

computePositionOptions

{} | Partial<{ placement?: Elements; }) => Promisable<Platform | undefined; }>

open
```
boolean
```
```
boolean
```

trigger

{
  readonly onfocusout: () => Promise<void>
  readonly "data-melt-popover-trigger": ""
  readonly id: string
  readonly popovertarget: string
  readonly onclick: (e: Event) => void
}

The trigger that toggles the value.

content

{
  readonly onfocusout: () => Promise<void>
  readonly "data-melt-popover-content": ""
  readonly id: string
  readonly popover: "manual"
  readonly ontoggle: (
    e: ToggleEvent & { currentTarget: EventTarget & HTMLElement },
  ) => void
  readonly tabindex: -1
  readonly inert: boolean
  readonly "data-open": "" | undefined
}

{
  readonly onfocusout: () => Promise<void>
  readonly "data-melt-popover-content": ""
  readonly id: string
  readonly popover: "manual"
  readonly ontoggle: (
    e: ToggleEvent & { currentTarget: EventTarget & HTMLElement },
  ) => void
  readonly tabindex: -1
  readonly inert: boolean
  readonly "data-open": "" | undefined
}