NativePopover

NativePopover is a component that floats around an element to display information using the HTML Popover API.

<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 uses the HTML Popover API, which provides better performance and accessibility compared to the Popover. However, it requires browser support for the Popover API.

Usage

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

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

import { NativePopover } from "@workspaces/ui"

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

Change Size

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

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

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

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

Display Popover Here

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

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

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

The HTML Popover API supports different modes for controlling popover behavior. This is a key feature that distinguishes NativePopover from the Popover component.

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

<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

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

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.

Accessibility

Key	Description	State
`Escape`	Closes the popover.	`popover="auto"`, `popover="hint"`

ARIA Roles and Attributes

Component	Role and Attribute	Usage
`NativePopover.Content`	`role="dialog"`	Indicates that it is a dialog.
	`id`	Used to associate with `NativePopover.Trigger`.
	`aria-labelledby`	Sets the `id` of the associated `NativePopover.Header`.
	`aria-describedby`	Sets the `id` of the associated `NativePopover.Body`.
`NativePopover.Trigger`	`role="button"`	Indicates that it is a button.
	`aria-haspopup="dialog"`	Indicates that it triggers a dialog.
	`aria-controls`	Sets the `id` of the associated `NativePopover.Content`.
	`aria-disabled`	Sets to `"true"` when `disabled={true}`.
`NativePopover.Header`	`id`	Used to associate with `NativePopover.Content`.
`NativePopover.Body`	`id`	Used to associate with `NativePopover.Content`.

Similar Components

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

Tooltip is a component that displays short information, such as supplementary details for an element.

Drawer is a component for a panel that appears from the edge of the screen.

Menu is a component that displays a common dropdown menu.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Indicator is a component that displays at the corner of elements such as avatars.

Used By Components & Hooks

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

NativePopover

Usage

Change Size

Add Footer

Close Trigger

Display Popover on Different Element

Change Placement

Change Offset

Popover Modes

Disable

Nest Popovers

Props

NativePopover.Root

NativePopover.Anchor

NativePopover.Body

NativePopover.CloseTrigger

NativePopover.Content

NativePopover.Footer

NativePopover.Header

NativePopover.Trigger

Accessibility

Keyboard Navigation

ARIA Roles and Attributes

Similar Components

Popover

Tooltip

Drawer

Menu

Modal

Indicator

Used By Components & Hooks

Popover

NativePopover.Root

NativePopover.Anchor

NativePopover.Body

NativePopover.CloseTrigger

NativePopover.Content

NativePopover.Footer

NativePopover.Header

NativePopover.Trigger