GitHub

Tooltip

A tooltip on web, with only accessibility output on native

Features

  • Doesn't open until your mouse stops moving.

  • Easy to animate enter and exit.

  • Sizable, positionable, unstyled or styled.

Note that Tooltip doesn’t render on native platforms.

Installation

Tooltip is already installed in tamagui, or you can install it independently:

yarn add @tamagui/tooltip

PortalProvider

If you are not using tamagui (but rather @tamagui/core) you’ll need to install the @tamagui/portal package:

yarn add @tamagui/portal

Then add PortalProvider to the root of your app:

App.tsx
import { PortalProvider } from '@tamagui/portal'

import YourApp from './components/YourApp'



function App() {

  return (

    <PortalProvider shouldAddRootHost>

      <YourApp />

    </PortalProvider>

  )

}



export default App

Props

  • shouldAddRootHost

    boolean

    Defines whether to add a default root host or not.

    • Anatomy

    import { Tooltip } from 'tamagui' // or '@tamagui/tooltip'

    

    export default () => (

      <Tooltip>

        <Tooltip.Trigger />

        <Tooltip.Content>

          <Tooltip.Arrow />

          {/* ... */}

        </Tooltip.Content>

      </Tooltip>

    )

    API Reference

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

    The controlled open state of the tooltip.

  • defaultOpen

    boolean

    The open state when initially rendered.

  • onOpenChange

    (open: boolean) => void

    Event handler called when the open state changes.

  • modal

    boolean

    Default: 

    true

    Renders into root of app instead of inline.

  • stayInFrame

    ShiftProps

    See floating-ui shift().

  • allowFlip

    FlipProps

    See floating-ui flip().

  • offset

    OffsetOptions

    Determines the distance the Popover appears from the target, see floating-ui offset().

    • If using modal={true} (which is true by default), refer to the PortalProvider installation for more information.

    Tooltip.Trigger

    Used to trigger opening of the popover when uncontrolled, see YStack in Stacks.

    Tooltip.Content

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

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

    TooltipGroup

    This allows you to logically group any tooltips rendered below this component. You can control their delay props, and components inside a TooltipGroup will be smart about opening quicker if you are moving between targets with tooltips, ensuring that subsequent tooltips show immediately rather than after a delay.

    See the Floating UI docs  for full details on how this works.

    Props

  • delay

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

    The delay to use for the group.

  • timeoutMs

    number

    An optional timeout to use for the group, which represents when grouping logic will no longer be active after the close delay completes. Useful if you want grouping to last longer than the close delay, for example if there is no close delay at all.

  • preventAnimation

    boolean

    Will disable the enter/exit animations while the group is active, but not for the initial enter animation of the first hovered tooltip.

    • closeOpenTooltips

    A small helper function of type () => void that will close any open tooltips.

    Scoping

    Tooltip supports scoping which lets you mount a single Tooltip instance at the root of your app, while having deeply nested Trigger components anywhere in your tree attach to that single parent Tooltip.

    This is useful for performance - you only render Tooltip.Trigger in your list items or buttons, while the heavier Tooltip and Tooltip.Content live at the root. It also lets you style all your tooltips consistently in one place.

    _layout.tsx
    import { Tooltip } from 'tamagui'

    

    export default ({ children }) => (

      <Tooltip scope="tooltip">

        <Tooltip.Content>

          <Tooltip.Arrow />

          {/* your tooltip content renders here */}

        </Tooltip.Content>

    

        {/* the rest of your app renders inside */}

        {children}

      </Tooltip>

    )

    MyButton.tsx
    export default () => (

      <Tooltip.Trigger scope="tooltip" aria-label="Settings">

        <Button icon={Settings} />

      </Tooltip.Trigger>

    )

    The scope prop on Trigger connects it to the Tooltip with the matching scope.

    Previous

    Tabs

    Next

    Toast

    Edit this page on GitHub.