Popover

Show content with a trigger in a floating pane.

Features

Optional arrow to point to content.

Keeps within bounds of page.

Can be placed into 12 anchor positions.

Anatomy

import { Popover } from '@tamagui/popover'

export default () => (
  <Popover>
    <Popover.Trigger />
    <Popover.Content>
      <Popover.Arrow />
      <Popover.Close />
      {/* ... */}
    </Popover.Content>
  </Popover>
)

API

Contains every component for the popover.

Prop	Type	Default
`children*`	`React.ReactNode`
Must contain Popover.Content
`size`	`SizeTokens`
Passes size down too all sub-components when set for padding, arrow, borderRadius
`placement`	`Placement`
'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end'
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`modal`	`boolean`	`true`
Renders into root of app instead of inline
`stayInFrame`	`ShiftProps`
See floating-ui shift()
`allowFlip`	`FlipProps`
See floating-ui flip

Trigger

Used to trigger opening of the popover when uncontrolled, just renders a YStack, see Stacks.

Content

Renders as SizableStack which is just a YStack (see Stacks) with an extra size prop that accepts any SizeTokens.

Used to display the content of the popover.

Docs coming soon, we need to finalize a few more things to get the full set of props working

Anchor

Renders as YStack, see Stacks.

When you want the Trigger to be in another location from where the Popover attaches, use Anchor. When used, Anchor is where the Popover will attach, while Trigger will open it.

Separator

Tooltip

Edit this page on GitHub.

Getting Started

Core

Tamagui

Separate Components

Extras

Guides