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

<Tooltip />

Contains every component for the tooltip.

Props

  • children (required)

    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

    boolean

    Default: 

    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, see YStack in Stacks.

    Content

    Renders as SizableStack (see Stacks) with an extra size prop that accepts any SizeTokens.

    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 Tooltip attaches, use Anchor. When used, Anchor is where the Tooltip will attach, while Trigger will open it.