psst...

Can I tell you a secret?

yes

you're awesome

Edit props

Props

Close

---

Show arrow

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

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

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

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

Component

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

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

Customizing floating elements

Floating elements use Floating UI under the hood. To this end, we expose a floatingConfig option, which can be used to control the underlying computePosition function, its middlewares, and the resulting styling that is applied.

API Reference

Constructor Props

The props that are passed when calling

new Popover()

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 | undefined>;

  /**
   * 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>;

  /**
   * Config to be passed to `useFloating`
   */
  floatingConfig?: UseFloatingArgs["config"];

  /**
   * If the popover should have the same width as the trigger
   *
   * @default false
   */
  sameWidth?: MaybeGetter<boolean | undefined>;

  /**
   * If the popover should close when clicking escape.
   *
   * @default true
   */
  closeOnEscape?: MaybeGetter<boolean | undefined>;

  /**
   * If the popover should close when clicking outside.
   * Alternatively, accepts a function that receives the clicked element,
   * and returns if the popover should close.
   *
   * @default true
   */
  closeOnOutsideClick?: CloseOnOutsideClickProp;
};

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 | undefined>;

  /**
   * 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>;

  /**
   * Config to be passed to `useFloating`
   */
  floatingConfig?: UseFloatingArgs["config"];

  /**
   * If the popover should have the same width as the trigger
   *
   * @default false
   */
  sameWidth?: MaybeGetter<boolean | undefined>;

  /**
   * If the popover should close when clicking escape.
   *
   * @default true
   */
  closeOnEscape?: MaybeGetter<boolean | undefined>;

  /**
   * If the popover should close when clicking outside.
   * Alternatively, accepts a function that receives the clicked element,
   * and returns if the popover should close.
   *
   * @default true
   */
  closeOnOutsideClick?: CloseOnOutsideClickProp;
};

Properties

The properties returned from

new Popover()

new Popover()

• ids

  { invoker: string; popover: string } & {
    trigger: string
    content: string
  }

  { invoker: string; popover: string } & {
    trigger: string
    content: string
  }
• trigger

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

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

  The trigger that toggles the value.
• content

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

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