Popover

Popover is a component that floats around an element to display information.

<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>空条承太郎</Popover.Header>
    <Popover.Body>やれやれだぜ</Popover.Body>
  </Popover.Content>
</Popover.Root>

Usage

import { Popover } from "@yamada-ui/react"

import { Popover } from "@/components/ui"

import { Popover } from "@workspaces/ui"

<Popover.Root>
  <Popover.Anchor />
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Header />
    <Popover.Body />
    <Popover.Footer />
  </Popover.Content>
</Popover.Root>

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg"]}>
    {(size) => (
      <Popover.Root key={size} size={size}>
        <Popover.Trigger>
          <Button>Size ({size})</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>花京院典明</Popover.Header>
          <Popover.Body>レロレロレロレロレロレロ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

<Popover.Root>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ジョルノ・ジョバァーナ</Popover.Header>
    <Popover.Body>僕には夢がある</Popover.Body>
    <Popover.Footer>黄金の風</Popover.Footer>
  </Popover.Content>
</Popover.Root>

To display a popover on a different element, use Popover.Anchor.

Here Display Popover

<Popover.Root>
  <Wrap gap="md">
    <Popover.Anchor>
      <Center borderWidth="1px" h="10" px="3" rounded="l2">
        Here Display Popover
      </Center>
    </Popover.Anchor>

    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>
  </Wrap>

  <Popover.Content>
    <Popover.Header>ジョセフ・ジョースター</Popover.Header>
    <Popover.Body>お前の次のセリフは…「そんなバカな！」と言う</Popover.Body>
  </Popover.Content>
</Popover.Root>

Change Animation

To change the animation, set animationScheme to "block-start", "inline-end", etc. By default, "scale" is set.

<Wrap gap="md">
  <For
    each={["scale", "block-start", "inline-start", "inline-end", "block-end"]}
  >
    {(animationScheme) => (
      <Popover.Root key={animationScheme} animationScheme={animationScheme}>
        <Popover.Trigger>
          <Button>{toTitleCase(animationScheme)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ブローノ・ブチャラティ</Popover.Header>
          <Popover.Body>アリーヴェデルチ（さよならだ）</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

Change Placement

To change the placement, set placement to "start", "end-end", etc. By default, "end" is set.

<Wrap gap="md">
  <For
    each={["start", "start-start", "start-end", "end", "end-start", "end-end"]}
  >
    {(placement) => (
      <Popover.Root key={placement} placement={placement}>
        <Popover.Trigger>
          <Button>{toTitleCase(placement)}</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>ディアボロ</Popover.Header>
          <Popover.Body>これが…レクイエム…だ</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    )}
  </For>
</Wrap>

Change Duration

To change the duration, set duration to a number (seconds).

<Popover.Root duration={0.7}>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>吉良吉影</Popover.Header>
    <Popover.Body>僕は平穏に暮らしたいだけなんだ</Popover.Body>
  </Popover.Content>
</Popover.Root>

Change Offset

To change the offset, set gutter or offset to a value.

<HStack>
  <Popover.Root gutter={32}>
    <Popover.Trigger>
      <Button>Gutter</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root offset={[16, 16]}>
    <Popover.Trigger>
      <Button>Offset</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Popover.Header>東方仗助</Popover.Header>
      <Popover.Body>グレートだぜ</Popover.Body>
    </Popover.Content>
  </Popover.Root>
</HStack>

To use modal, set modal to true. This enables scroll blocking and focus trapping.

<Popover.Root modal>
  <Popover.Trigger>
    <Button>Open Profile</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>フーゴ・パンナコッタ</Popover.Header>
    <Popover.Body>
      <Field.Root label="スタンド名">
        <Input placeholder="パープル・ヘイズ" />
      </Field.Root>

      <Field.Root label="能力">
        <Input type="text" placeholder="ウイルス散布" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

Disable

To disable the popover, set disabled to true.

<Popover.Root disabled>
  <Popover.Trigger>
    <Button>Click Me</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>虹村億泰</Popover.Header>
    <Popover.Body>おい、仗助！</Popover.Body>
  </Popover.Content>
</Popover.Root>

Disable Close on Outside Click

To disable closing when clicking outside, set closeOnBlur to false.

<Popover.Root closeOnBlur={false}>
  <Popover.Trigger>
    <Button>No Close on Blur</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>イギー</Popover.Header>
    <Popover.Body>んがくく（犬の鳴き声）</Popover.Body>
  </Popover.Content>
</Popover.Root>

Disable Close on ESC Key

To disable closing when pressing the ESC key, set closeOnEsc to false.

<Popover.Root closeOnEsc={false}>
  <Popover.Trigger>
    <Button>No Close on ESC</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ディオ・ブランドー</Popover.Header>
    <Popover.Body>無駄無駄無駄！</Popover.Body>
  </Popover.Content>
</Popover.Root>

Disable Auto Focus

To disable automatic focus when the popover opens, set autoFocus to false.

<Popover.Root autoFocus={false}>
  <Popover.Trigger>
    <Button>No Auto Focus</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>
      <Field.Root label="職業">
        <Input placeholder="漫画家" />
      </Field.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

Set Initial Focus

To set the initial focus, pass a Ref to initialFocusRef.

const inputRef = useRef<HTMLInputElement>(null)

return (
  <Popover.Root initialFocusRef={inputRef}>
    <Popover.Trigger>
      <Button>Focus Email Input</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>ナランチャ・ギルガ</Popover.Header>
      <Popover.Body>
        <Field.Root label="スタンド名">
          <Input placeholder="エアロスミス" />
        </Field.Root>

        <Field.Root label="好きなもの">
          <Input ref={inputRef} type="text" placeholder="飛行機とピザ" />
        </Field.Root>
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Block Scroll

To block scrolling while the popover is open, set blockScrollOnMount to true.

<Popover.Root blockScrollOnMount>
  <Popover.Trigger>
    <Button>Block Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>岸辺露伴</Popover.Header>
    <Popover.Body>だが断る</Popover.Body>
  </Popover.Content>
</Popover.Root>

Close on Scroll

To automatically close the popover when scrolling, set closeOnScroll to true.

<Popover.Root closeOnScroll>
  <Popover.Trigger>
    <Button>Close on Scroll</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>ギアッチョ</Popover.Header>
    <Popover.Body>根掘り葉掘り聞きやがって！</Popover.Body>
  </Popover.Content>
</Popover.Root>

Nest Popovers

<Popover.Root>
  <Popover.Trigger>
    <Button>Open Parent</Button>
  </Popover.Trigger>

  <Popover.Content>
    <Popover.Header>花京院典明</Popover.Header>
    <Popover.Body>
      <Text>やはりエジプトか……いつ出発する？</Text>

      <Popover.Root>
        <Popover.Trigger>
          <Button>わたしも同行する</Button>
        </Popover.Trigger>

        <Popover.Content>
          <Popover.Header>空条承太郎</Popover.Header>
          <Popover.Body>花京院</Popover.Body>
        </Popover.Content>
      </Popover.Root>
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

Control

const { open, onClose, onOpen } = useDisclosure()

return (
  <Popover.Root open={open} onClose={onClose} onOpen={onOpen}>
    <Popover.Trigger>
      <Button>Click Me</Button>
    </Popover.Trigger>

    <Popover.Content>
      <Popover.Header>スピードワゴン</Popover.Header>
      <Popover.Body>
        こいつはくせえッー！ ゲロ以下のにおいがプンプンするぜッーーーーッ!!
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Popover.Root

Prop	Default	Type / Description
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xs"` The size of the component.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoFocus`	`true`	`boolean` If `true`, focus will be transferred to the first interactive element when the popover opens.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`children`	-	`ReactNodeOrFunction<{ open: boolean onClose: () => void }>` The children of the popover.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`disabled`	`false`	`boolean` If `true`, the popover will be disabled.
`duration`	`0.2`	`PopupAnimationProps["duration"]` The animation duration.
`elements`	-	`{ floating?: HTMLElement \| null reference?: null \| Reference<Y> }` Object containing the reference and floating elements.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`initialFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when the popover opens.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`middleware`	-	`(false \| Middleware \| null \| undefined)[]` Array of middleware objects to modify the positioning or provide data for rendering.
`modal`	`false`	`boolean` If `true`, the popover will be modal. - scrolling is blocked. - focus is trapped within the popover.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the popover will be opened when click on the field.
`placement`	`"end"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`transform`	`true`	`boolean` Whether to use `transform` for positioning instead of `top` and `left` (layout) in the `floatingStyles` object.
`updateRef`	-	`RefObject<() => void>` Update the position of the floating element, re-rendering the component if required.
`whileElementsMounted`	-	`(reference: Reference<Y>, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).
`withCloseButton`	`true`	`boolean` If `true`, display the popover close button.

Popover.Anchor

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Popover.Body

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Popover.Content

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`portalProps`	-	`Omit<PortalProps, "children">` Props for portal component.

Popover.Footer

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Popover.Header

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Popover.Trigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The Popover follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

When the Popover opens, focus is trapped within it. That is, you cannot focus on elements outside the popover unless the popper is closed.

Key	Description	State
`Tab`	Focuses the next element within the popover that is not disabled. If it's the last element, the popover is closed.	`open={true}`
`Shift` + `Tab`	Focuses the previous element within the popover that is not disabled. If it's the first element, the popover is closed.	`open={true}`
`Escape`	Closes the popover.	`open={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Popover.Content`	`role="dialog"`	Indicates that it is a dialog.
	`aria-labelledby`	Sets the `id` of the associated `Popover.Header`.
	`aria-describedby`	Sets the `id` of the associated `Popover.Body`.
	`aria-hidden`	Sets to `"false"` when popover is opened, and `"true"` when it is closed.
	`aria-modal`	Sets to `"true"` when `modal={true}`.
`Popover.Trigger`	`role="button"`	Indicates that it is a button.
	`aria-expanded`	Sets to `"true"` when popover is opened, and `"false"` when it is closed.
	`aria-controls`	Set to `Popover.Content`'s id when popover is opened, and `undefined` when it is closed.
	`aria-haspopup="dialog"`	Indicates that it triggers a dialog.
`Popover.Header`	`id`	Used to associate with `Popover.Content`.
`Popover.Body`	`id`	Used to associate with `Popover.Content`.

Popover

Usage

Change Size

Add Footer

Display Popover on Different Element

Change Animation

Change Placement

Change Duration

Change Offset

Disable

Disable Close on Outside Click

Disable Close on ESC Key

Disable Auto Focus

Set Initial Focus

Block Scroll

Close on Scroll

Nest Popovers

Control

Props

Popover.Root

Popover.Anchor

Popover.Body

Popover.Content

Popover.Footer

Popover.Header

Popover.Trigger

Accessibility

Keyboard Navigation

ARIA Roles and Attributes

Popover.Root

Popover.Anchor

Popover.Body

Popover.Content

Popover.Footer

Popover.Header

Popover.Trigger