Tooltip

A tooltip on web, with only accessibility output on native.

Features

  • Doesn't open until your mouse stops moving.

  • Doesn't render on native.

  • Sizable and positionable.

Anatomy

import { Tooltip } from '@tamagui/tooltip'
export default () => (
<Tooltip>
<Tooltip.Trigger />
<Tooltip.Content>
<Tooltip.Arrow />
{/* ... */}
</Tooltip.Content>
</Tooltip>
)

API

Popover

Contains every component for the popover.

Prop

Type

Default

children*
React.ReactNode

Must contain Popover.Content

groupId
string

If given, will work alongside TooltipGroup to ensure only one tooltip in the groups stays open.

restMs
number

Time needed for cursor to rest before showing.

delay
number | { open?: number; close?: number }

Maximum time before showing (can be set independently for open/close).

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
booleantrue

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.