Popover

A floating panel that appears relative to a trigger element.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>
      click me
      <Popover.Indicator />
    </Popover.Trigger>
    <Popover.Anchor>Anchor</Popover.Anchor>
    <Popover.Positioner data-testid="positioner">
      <Popover.Arrow>
        <Popover.ArrowTip />
      </Popover.Arrow>
      <Popover.Content>
        <Popover.Title>title</Popover.Title>
        <Popover.Description>description</Popover.Description>
        <Popover.CloseTrigger>close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export interface BasicProps {
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic({ lazyMount, unmountOnExit }: BasicProps) {
  return (
    <Popover.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit}>
      <Popover.Trigger>
        click me
        <Popover.Indicator />
      </Popover.Trigger>
      <Popover.Anchor>Anchor</Popover.Anchor>
      <Popover.Positioner data-testid="positioner">
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.Content>
          <Popover.Title>title</Popover.Title>
          <Popover.Description>description</Popover.Description>
          <Popover.CloseTrigger>close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { ChevronRightIcon } from 'lucide-solid'

export function Basic() {
  return (
    <Popover.Root>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          <ChevronRightIcon />
        </Popover.Indicator>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">
  import type { PopoverRootProps } from '@destyler-ui/svelte'
  import { Popover } from '@destyler-ui/svelte'

  const props: PopoverRootProps = $props()
</script>

<Popover.Root {...props}>
  <Popover.Trigger>click me <Popover.Indicator /></Popover.Trigger>
  <Popover.Anchor>Anchor</Popover.Anchor>
  <Popover.Positioner data-testid="positioner">
    <Popover.Arrow><Popover.ArrowTip /></Popover.Arrow>
    <Popover.Content>
      <Popover.Title>title</Popover.Title>
      <Popover.Description>description</Popover.Description>
      <Popover.CloseTrigger>close</Popover.CloseTrigger>
    </Popover.Content>
  </Popover.Positioner>
</Popover.Root>

Anatomy

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger />
    <Popover.Anchor />
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title />
        <Popover.Description />
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.CloseTrigger />
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Popover.Root>
      <Popover.Trigger />
      <Popover.Anchor />
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title />
          <Popover.Description />
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.CloseTrigger />
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Popover.Root>
      <Popover.Trigger />
      <Popover.Anchor />
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title />
          <Popover.Description />
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.CloseTrigger />
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">
  import { Popover } from '@destyler-ui/svelte'
</script>

<Popover.Root>
  <Popover.Trigger>
    Open popover
    <Popover.Indicator />
  </Popover.Trigger>
  <Popover.Anchor>Anchor</Popover.Anchor>
  <Popover.Positioner>
    <Popover.Arrow>
      <Popover.ArrowTip />
    </Popover.Arrow>
    <Popover.Content>
      <Popover.Title>Popover title</Popover.Title>
      <Popover.Description>Popover description</Popover.Description>
      <Popover.CloseTrigger>Close</Popover.CloseTrigger>
    </Popover.Content>
  </Popover.Positioner>
</Popover.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>
      click me
      <Popover.Indicator />
    </Popover.Trigger>
    <Popover.Anchor>Anchor</Popover.Anchor>
    <Popover.Positioner data-testid="positioner">
      <Popover.Arrow>
        <Popover.ArrowTip />
      </Popover.Arrow>
      <Popover.Content>
        <Popover.Title>title</Popover.Title>
        <Popover.Description>description</Popover.Description>
        <Popover.CloseTrigger>close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export interface BasicProps {
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic({ lazyMount, unmountOnExit }: BasicProps) {
  return (
    <Popover.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit}>
      <Popover.Trigger>
        click me
        <Popover.Indicator />
      </Popover.Trigger>
      <Popover.Anchor>Anchor</Popover.Anchor>
      <Popover.Positioner data-testid="positioner">
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.Content>
          <Popover.Title>title</Popover.Title>
          <Popover.Description>description</Popover.Description>
          <Popover.CloseTrigger>close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { ChevronRightIcon } from 'lucide-solid'

export function Basic() {
  return (
    <Popover.Root>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          <ChevronRightIcon />
        </Popover.Indicator>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">
  import type { PopoverRootProps } from '@destyler-ui/svelte'
  import { Popover } from '@destyler-ui/svelte'

  const props: PopoverRootProps = $props()
</script>

<Popover.Root {...props}>
  <Popover.Trigger>click me <Popover.Indicator /></Popover.Trigger>
  <Popover.Anchor>Anchor</Popover.Anchor>
  <Popover.Positioner data-testid="positioner">
    <Popover.Arrow><Popover.ArrowTip /></Popover.Arrow>
    <Popover.Content>
      <Popover.Title>title</Popover.Title>
      <Popover.Description>description</Popover.Description>
      <Popover.CloseTrigger>close</Popover.CloseTrigger>
    </Popover.Content>
  </Popover.Positioner>
</Popover.Root>

Arrow

Display an arrow pointing to the trigger.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>Click Me</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
        <Popover.CloseTrigger>Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function Arrow() {
  return (
    <Popover.Root>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'

export function Arrow() {
  return (
    <Popover.Root>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root>
  <Popover.Trigger>Click Me</Popover.Trigger>
  <Popover.Positioner><Popover.Content>
    <Popover.Arrow><Popover.ArrowTip /></Popover.Arrow>
    <Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description>
    <Popover.CloseTrigger>Close</Popover.CloseTrigger>
  </Popover.Content></Popover.Positioner>
</Popover.Root>

Controlled

Control the open state of the popover programmatically.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { Popover } from '@destyler-ui/vue'

const open = ref(false)
</script>

<template>
  <Fragment>
    <button @click="() => (open = !open)">toggle</button>
    <Popover.Root v-model="open">
      <Popover.Trigger>
        click me
        <Popover.Indicator />
      </Popover.Trigger>
      <Popover.Anchor>Anchor</Popover.Anchor>
      <Popover.Positioner data-testid="positioner">
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.Content>
          <Popover.Title>title</Popover.Title>
          <Popover.Description>description</Popover.Description>
          <Popover.CloseTrigger>close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  </Fragment>
</template>

import { useState } from 'react'
import { Popover } from '@destyler-ui/react'

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(!open)}>toggle</button>
      <Popover.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
        <Popover.Trigger>
          click me
          <Popover.Indicator />
        </Popover.Trigger>
        <Popover.Anchor>Anchor</Popover.Anchor>
        <Popover.Positioner>
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.Content>
            <Popover.Title>title</Popover.Title>
            <Popover.Description>description</Popover.Description>
            <Popover.CloseTrigger>close</Popover.CloseTrigger>
          </Popover.Content>
        </Popover.Positioner>
      </Popover.Root>
    </>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [isOpen, setIsOpen] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setIsOpen(!isOpen())}>
        Toggle
      </button>
      <Popover.Root open={isOpen()}>
        <Popover.Anchor>Anchor</Popover.Anchor>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
            <Popover.CloseTrigger>Close</Popover.CloseTrigger>
          </Popover.Content>
        </Popover.Positioner>
      </Popover.Root>
    </>
  )
}

<script lang="ts">
  import { Popover } from '@destyler-ui/svelte'
  let open = $state(false)
</script>
<button onclick={() => open = !open}>toggle</button>
<Popover.Root bind:open>
  <Popover.Trigger>click me <Popover.Indicator /></Popover.Trigger>
  <Popover.Anchor>Anchor</Popover.Anchor>
  <Popover.Positioner data-testid="positioner"><Popover.Arrow><Popover.ArrowTip /></Popover.Arrow><Popover.Content>
    <Popover.Title>title</Popover.Title><Popover.Description>description</Popover.Description><Popover.CloseTrigger>close</Popover.CloseTrigger>
  </Popover.Content></Popover.Positioner>
</Popover.Root>

Modal

Display the popover as a modal overlay.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root modal>
    <Popover.Trigger>Click Me</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
        <Popover.CloseTrigger>Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function Modal() {
  return (
    <Popover.Root modal>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'

export function Modal() {
  return (
    <Popover.Root modal>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root modal>
  <Popover.Trigger>Click Me</Popover.Trigger>
  <Popover.Positioner><Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description><Popover.CloseTrigger>Close</Popover.CloseTrigger></Popover.Content></Popover.Positioner>
</Popover.Root>

Positioning

Customize the popover positioning.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root
    :positioning="{
      placement: 'left-start',
      gutter: 16,
      offset: { mainAxis: 12, crossAxis: 12 },
    }"
  >
    <Popover.Trigger>Click Me</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
        <Popover.CloseTrigger>Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function Positioning() {
  return (
    <Popover.Root
      positioning={{
        placement: 'left-start',
        gutter: 16,
        offset: { mainAxis: 12, crossAxis: 12 },
      }}
    >
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'

export function Positioning() {
  return (
    <Popover.Root
      positioning={{
        placement: 'left-start',
        offset: { mainAxis: 12, crossAxis: 12 },
      }}
    >
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}>
  <Popover.Trigger>Click Me</Popover.Trigger>
  <Popover.Positioner><Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description><Popover.CloseTrigger>Close</Popover.CloseTrigger></Popover.Content></Popover.Positioner>
</Popover.Root>

Close Behavior

Configure how the popover closes.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root :closeOnEsc="false" :closeOnInteractOutside="false">
    <Popover.Trigger>Click Me</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
        <Popover.CloseTrigger>Close</Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function CloseBehavior() {
  return (
    <Popover.Root closeOnEsc={false} closeOnInteractOutside={false}>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { Portal } from 'solid-js/web'

export function CloseBehavior() {
  return (
    <Popover.Root closeOnEscape={false} closeOnInteractOutside={false}>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Portal>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
            <Popover.CloseTrigger>Close</Popover.CloseTrigger>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root closeOnEscape={false} closeOnInteractOutside={false}>
  <Popover.Trigger>Click Me</Popover.Trigger>
  <Popover.Positioner><Popover.Content>
    <Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description>
    <Popover.CloseTrigger>Close</Popover.CloseTrigger>
  </Popover.Content></Popover.Positioner>
</Popover.Root>

As Child

Use asChild to render the trigger as a custom element.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger asChild>
      <button>Open</button>
    </Popover.Trigger>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function AsChild() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button>Open</button>
      </Popover.Trigger>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'

export function AsChild() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild={props => <button {...props()} />}>Open</Popover.Trigger>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root>
  <Popover.Trigger>
    {#snippet asChild(props)}<button {...props()}>Open</button>{/snippet}
  </Popover.Trigger>
</Popover.Root>

Portalled

Render the popover in a portal.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root portalled>
    <Popover.Trigger>
      Click Me
      <Popover.Indicator>{{ '>' }}</Popover.Indicator>
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function Portalled() {
  return (
    <Popover.Root portalled>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          {'>'}
        </Popover.Indicator>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { ChevronRightIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'

export function Portalled() {
  return (
    <Popover.Root portalled>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          <ChevronRightIcon />
        </Popover.Indicator>
      </Popover.Trigger>
      <Portal>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { Popover } from '@destyler-ui/svelte'
</script>
<Popover.Root portalled>
  <Popover.Trigger>Click Me <Popover.Indicator>&gt;</Popover.Indicator></Popover.Trigger>
  <div use:portal><Popover.Positioner><Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description></Popover.Content></Popover.Positioner></div>
</Popover.Root>

On Open Change

Handle the open state change event.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root @open-change="(open) => console.log(open ? 'opened' : 'closed')">
    <Popover.Trigger>
      Click Me
      <Popover.Indicator>{{ '>' }}</Popover.Indicator>
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function OnOpenChange() {
  return (
    // eslint-disable-next-line no-console
    <Popover.Root onOpenChange={({ open }) => console.log(open ? 'opened' : 'closed')}>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          {'>'}
        </Popover.Indicator>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'
import { ChevronRightIcon } from 'lucide-solid'

export function OnOpenChange() {
  return (
    <Popover.Root onOpenChange={open => console.warn(open ? 'opened' : 'closed')}>
      <Popover.Trigger>
        Click Me
        <Popover.Indicator>
          <ChevronRightIcon />
        </Popover.Indicator>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root onOpenChange={({ open }) => console.log(open ? 'opened' : 'closed')}>
  <Popover.Trigger>Click Me <Popover.Indicator>&gt;</Popover.Indicator></Popover.Trigger>
  <Popover.Positioner><Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description></Popover.Content></Popover.Positioner>
</Popover.Root>

Render Function

Use render function for custom popover rendering.

Show Code

<script setup lang="ts">
import { Popover } from '@destyler-ui/vue'
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>Click Me</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context v-slot="popover">
        <Popover.Content>
          <Popover.Title>Title</Popover.Title>
          <Popover.Description>Description: {{ popover.open.toString() }}</Popover.Description>
          <Popover.CloseTrigger>Close</Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
</template>

import { Popover } from '@destyler-ui/react'

export function RenderFn() {
  return (
    <Popover.Root>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Context>
          {popover => (
            <Popover.Content>
              <Popover.Title>Title</Popover.Title>
              <Popover.Description>Description: {popover.open.toString()}</Popover.Description>
              <Popover.CloseTrigger>Close</Popover.CloseTrigger>
            </Popover.Content>
          )}
        </Popover.Context>
      </Popover.Positioner>
    </Popover.Root>
  )
}

import { Popover } from '@destyler-ui/solid/popover'

export function RenderFn() {
  return (
    <Popover.Root>
      <Popover.Trigger>Click Me</Popover.Trigger>
      <Popover.Positioner>
        <Popover.Context>
          {context => (
            <Popover.Content>
              <Popover.Title>Title</Popover.Title>
              <Popover.Description>Description: {context().open.toString()}</Popover.Description>
              <Popover.CloseTrigger>Close</Popover.CloseTrigger>
            </Popover.Content>
          )}
        </Popover.Context>
      </Popover.Positioner>
    </Popover.Root>
  )
}

<script lang="ts">import { Popover } from '@destyler-ui/svelte'</script>
<Popover.Root>
  <Popover.Trigger>Click Me</Popover.Trigger>
  <Popover.Positioner><Popover.Context>
    {#snippet render(popover)}
      <Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description: {popover().open.toString()}</Popover.Description><Popover.CloseTrigger>Close</Popover.CloseTrigger></Popover.Content>
    {/snippet}
  </Popover.Context></Popover.Positioner>
</Popover.Root>

Root Provider

Show Code

<script setup lang="ts">
import { Popover, usePopover } from '@destyler-ui/vue'

const popover = usePopover()
</script>

<template>
  <button @click="popover.setOpen(true)">Open</button>

  <Popover.RootProvider :value="popover">
    <Popover.Trigger>
      Click Me
      <Popover.Indicator>{{ '>' }}</Popover.Indicator>
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Title</Popover.Title>
        <Popover.Description>Description</Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.RootProvider>
</template>

import { Popover, usePopover } from '@destyler-ui/react'

export function RootProvider() {
  const popover = usePopover()

  return (
    <>
      <button onClick={() => popover.setOpen(true)}>Open</button>

      <Popover.RootProvider value={popover}>
        <Popover.Trigger>
          Click Me
          <Popover.Indicator>
            {'>'}
          </Popover.Indicator>
        </Popover.Trigger>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        </Popover.Positioner>
      </Popover.RootProvider>
    </>
  )
}

import { Popover, usePopover } from '@destyler-ui/solid/popover'
import { ChevronRightIcon } from 'lucide-solid'

export function RootProvider() {
  const popover = usePopover()

  return (
    <>
      <button onClick={() => popover().setOpen(true)}>
        Popover is {popover().open ? 'open' : 'closed'}
      </button>

      <Popover.RootProvider value={popover}>
        <Popover.Trigger>
          Click Me
          <Popover.Indicator>
            <ChevronRightIcon />
          </Popover.Indicator>
        </Popover.Trigger>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        </Popover.Positioner>
      </Popover.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Popover, usePopover } from '@destyler-ui/svelte'
  const id = $props.id()
  const popover = usePopover({ id })
</script>
<button onclick={() => popover().setOpen(true)}>Open</button>
<Popover.RootProvider value={popover}>
  <Popover.Trigger>Click Me <Popover.Indicator>&gt;</Popover.Indicator></Popover.Trigger>
  <Popover.Positioner><Popover.Content><Popover.Title>Title</Popover.Title><Popover.Description>Description</Popover.Description></Popover.Content></Popover.Positioner>
</Popover.RootProvider>

API Reference

Root

Prop	Default	Type
autoFocus	true	false | true Whether to automatically set focus on the first focusable content within the popover when opened.
closeOnEscape	true	false | true Whether to close the popover when the escape key is pressed.
closeOnInteractOutside	true	false | true Whether to close the popover when the user clicks outside of the popover.
defaultOpen	—	false | true The initial open state of the popover when it is first rendered. Use when you do not need to control its open state.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
initialFocusEl	—	() => HTMLElement | null The element to focus on when the popover is opened.
lazyMount	false	false | true Whether to enable lazy mounting
modal	false	false | true Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
open	—	false | true Whether the popover is open
persistentElements	—	(() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
portalled	true	false | true Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
positioning	—	calendar.PositioningOptions The user provided options used to position the popover content
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
escapeKeyDown	[event: KeyboardEvent] Function called when the escape key is pressed
focusOutside	[event: FocusOutsideEvent] Function called when the focus is moved outside the component
interactOutside	[event: InteractOutsideEvent] Function called when an interaction happens outside the component
openChange	[details: OpenChangeDetails] Function invoked when the popover opens or closes
pointerDownOutside	[event: PointerDownOutsideEvent] Function called when the pointer is pressed down outside the component
update:open	[open: boolean]

Anchor

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Description

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes>
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Title

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
closeOnEscape	true	false | true Whether to close the popover when the escape key is pressed.
closeOnInteractOutside	true	false | true Whether to close the popover when the user clicks outside of the popover.
defaultOpen	—	false | true The initial open state of the popover when it is first rendered. Use when you do not need to control its open state.
ids	—	Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
initialFocusEl	—	() => HTMLElement | null The element to focus on when the popover is opened.
lazyMount	false	false | true Whether to enable lazy mounting
modal	false	false | true Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: calendar.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onInteractOutside	—	(event: calendar.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: popover.OpenChangeDetails) => void Function invoked when the popover opens or closes
onPointerDownOutside	—	(event: calendar.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
open	—	false | true Whether the popover is open
persistentElements	—	(() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
portalled	true	false | true Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
positioning	—	calendar.PositioningOptions The user provided options used to position the popover content
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Anchor

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UsePopoverContext) => ReactNode

Description

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UsePopoverReturn
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Title

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
autoFocus	true	false | true Whether to automatically set focus on the first focusable content within the popover when opened.
children	—	null | number | false | true | Node | solid_js338.JSX.ArrayElement | (string & {})
closeOnEscape	true	false | true Whether to close the popover when the escape key is pressed.
closeOnInteractOutside	true	false | true Whether to close the popover when the user clicks outside of the popover.
defaultOpen	—	false | true The initial open state of the popover when it is first rendered. Use when you do not need to control its open state.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
initialFocusEl	—	() => HTMLElement | null The element to focus on when the popover is opened.
lazyMount	false	false | true Whether to enable lazy mounting
modal	false	false | true Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: popover.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onInteractOutside	—	(event: popover.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: OpenChangeDetails) => void Function invoked when the popover opens or closes
onPointerDownOutside	—	(event: popover.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
open	—	false | true Whether the popover is open
persistentElements	—	(() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
portalled	true	false | true Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
positioning	—	popover.PositioningOptions The user provided options used to position the popover content
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Anchor

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UsePopoverContext) => Element

Description

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UsePopoverReturn
children	—	null | number | false | true | Node | solid_js338.JSX.ArrayElement | (string & {})
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Title

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js338.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
autoFocus	true	false | true Whether to automatically set focus on the first focusable content within the popover when opened.
children	—	Snippet<[]> | undefined
closeOnEscape	true	false | true Whether to close the popover when the escape key is pressed.
closeOnInteractOutside	true	false | true Whether to close the popover when the user clicks outside of the popover.
defaultOpen	—	false | true
id	—	string
ids	—	Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
initialFocusEl	—	() => HTMLElement | null The element to focus on when the popover is opened.
lazyMount	false	false | true Whether to enable lazy mounting
modal	false	false | true Whether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	((event: FocusOutsideEvent) => void) | undefined Function called when the focus is moved outside the component
onInteractOutside	—	((event: InteractOutsideEvent) => void) | undefined Function called when an interaction happens outside the component
onOpenChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").PopoverOpenChangeDetails) => void Function invoked when the popover opens or closes
onPointerDownOutside	—	((event: PointerDownOutsideEvent) => void) | undefined Function called when the pointer is pressed down outside the component
open	—	false | true Whether the popover is open
persistentElements	—	(() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
portalled	true	false | true Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
positioning	—	PositioningOptions | undefined The user provided options used to position the popover content
present	—	false | true Whether the node is present (controlled by the user)
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
unmountOnExit	false	false | true Whether to unmount on exit.

Anchor

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Arrow

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ArrowTip

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

CloseTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

Prop	Default	Type
render	—	Snippet<[UsePopoverContext]>

Description

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"p">]>
children	—	Snippet<[]> | undefined

Indicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Positioner

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UsePopoverReturn
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
unmountOnExit	false	false | true Whether to unmount on exit.

Title

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"h2">]>
children	—	Snippet<[]> | undefined

Trigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined