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

```tsx
<NativePopover.Root>
  <NativePopover.Trigger>
    <Button>Click Me</Button>
  </NativePopover.Trigger>

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>
```

:::note
`NativePopover` uses the HTML Popover API, which provides better performance and accessibility compared to the [Popover](https://yamada-ui.com/components/popover.md). However, it requires browser support for the Popover API.
:::

## Usage

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

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

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

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

### Change Size

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

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    )}
  </For>
</Wrap>
```

### Add Footer

```tsx
<NativePopover.Root>
  <NativePopover.Trigger>
    <Button>Click Me</Button>
  </NativePopover.Trigger>

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
    <NativePopover.Footer>第280話</NativePopover.Footer>
  </NativePopover.Content>
</NativePopover.Root>
```

### Close Trigger

You can add a close button inside the popover using `NativePopover.CloseTrigger`.

```tsx
<NativePopover.Root>
  <NativePopover.Trigger>
    <Button>Click Me</Button>
  </NativePopover.Trigger>

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
    <NativePopover.Footer>
      <NativePopover.CloseTrigger>
        <Button>Close</Button>
      </NativePopover.CloseTrigger>
    </NativePopover.Footer>
  </NativePopover.Content>
</NativePopover.Root>
```

### Display Popover on Different Element

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

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

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

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>
```

### 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",
      "start-center",
      "end",
      "end-start",
      "end-end",
      "end-center",
      "center-start",
      "center-end",
    ]}
  >
    {(placement) => (
      <NativePopover.Root key={placement} placement={placement}>
        <NativePopover.Trigger>
          <Button>{toTitleCase(placement)}</Button>
        </NativePopover.Trigger>

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    )}
  </For>
</Wrap>
```

### Change Offset

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

```tsx
<HStack>
  <NativePopover.Root gutter={32}>
    <NativePopover.Trigger>
      <Button>Gutter</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root offset={[16, 16]}>
    <NativePopover.Trigger>
      <Button>Offset</Button>
    </NativePopover.Trigger>
    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>
</HStack>
```

### Popover Modes

The HTML Popover API supports different [modes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover#value) for controlling popover behavior. This is a key feature that distinguishes `NativePopover` from the `Popover` component.

```tsx
<Wrap gap="md">
  <NativePopover.Root popover="auto">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root popover="hint">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>

  <NativePopover.Root popover="manual">
    <NativePopover.Trigger>
      <Button>Click Me</Button>
    </NativePopover.Trigger>

    <NativePopover.Content>
      <NativePopover.Header>ベジータ!</NativePopover.Header>
      <NativePopover.Body>
        がんばれカカロット……お前がナンバー１だ！！
      </NativePopover.Body>
    </NativePopover.Content>
  </NativePopover.Root>
</Wrap>
```

### Disable

To disable the popover, set `disabled` to `true`.

```tsx
<NativePopover.Root disabled>
  <NativePopover.Trigger>
    <Button>Click Me</Button>
  </NativePopover.Trigger>

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      がんばれカカロット……お前がナンバー１だ！！
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>
```

### Nest Popovers

```tsx
<NativePopover.Root>
  <NativePopover.Trigger>
    <Button>Open Parent</Button>
  </NativePopover.Trigger>

  <NativePopover.Content>
    <NativePopover.Header>ベジータ!</NativePopover.Header>
    <NativePopover.Body>
      <Text>がんばれカカロット……お前がナンバー１だ！！</Text>

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

        <NativePopover.Content>
          <NativePopover.Header>ベジータ!</NativePopover.Header>
          <NativePopover.Body>
            がんばれカカロット……お前がナンバー１だ！！
          </NativePopover.Body>
        </NativePopover.Content>
      </NativePopover.Root>
    </NativePopover.Body>
  </NativePopover.Content>
</NativePopover.Root>
```

## Used By Components & Hooks

<UsedBy name="native-popover" />

## Props

### NativePopover.Root

| Prop                             | Default                                                | Type                                                                                 | Description                                                                                                                                                                                    |
| -------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`                           | `"md"`                                                 | `"lg" \| "md" \| "sm" \| "xs"`                                                       | The size of the component.                                                                                                                                                                     |
| `autoUpdate`                     | `true`                                                 | `boolean`                                                                            | If `true`, automatically updates the position of the floating element when necessary.                                                                                                          |
| `disabled`                       | `false`                                                | `boolean`                                                                            | If `true`, the popover will be disabled.                                                                                                                                                       |
| `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.                                                                                 |
| `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.                                                                                                           |
| `offset`                         | -                                                      | `[number, number]`                                                                   | The main and cross-axis offset to displace popper element from its reference element.                                                                                                          |
| `open`                           | `true`                                                 | `boolean`                                                                            | Whether the popper should be enabled.                                                                                                                                                          |
| `placement`                      | `"end"`                                                | `Direction`                                                                          | The placement of the popper relative to its reference.                                                                                                                                         |
| `platform`                       | -                                                      | `Platform`                                                                           | Custom or extended platform object.                                                                                                                                                            |
| `popover`                        | `"auto"`                                               | `"" \| "auto" \| "hint" \| "manual" \| true`                                         | The mode of the popover.                                                                                                                                                                       |
| `popoverTarget`                  | -                                                      | `string`                                                                             | The target element ID for the popover trigger. If not provided, a generated ID will be used.                                                                                                   |
| `popoverTargetAction`            | `"toggle"`                                             | `"hide" \| "show" \| "toggle"`                                                       | The action for the popover target.                                                                                                                                                             |
| `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.                                                                                                                                                           |
| `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`). |

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

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

### NativePopover.CloseTrigger

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

### NativePopover.Content

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

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

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

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