Components

Tooltip

A short, hover/focus-only label for a control. Reach for `Popover` if it needs interactive content.

Usage

import { Tooltip, Button } from '@onersoft/design-system'

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <Button variant="ghost">?</Button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content>Helper text</Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

Mount Tooltip.Provider once high in the tree (it controls global delay), then wrap each tooltip site in Tooltip.Root.

Parts

Provider, Root, Trigger, Portal, Content. Mirrors Radix Tooltip. Content accepts side, align, sideOffset.

On this page