---
title: Popover
description: "`Popover` is a component that floats around an element to display information."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/popover/popover.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/popover
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-popover--basic
---

```tsx
<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

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

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

```tsx
import { Popover } from "@workspaces/ui"
```

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

### Change Size

```tsx
<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>
```

### Add Footer

```tsx
<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>
```

### Display Popover on Different Element

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

```tsx
<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.

```tsx
<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.

```tsx
<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).

```tsx
<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.

```tsx
<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>
```

### Use Modal

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

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
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>
)
```

### Block Scroll

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

```tsx
<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`.

```tsx
<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

```tsx
<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

```tsx
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>
)
```

## 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

Currently, this section is being updated due to the migration of v2.