Tooltip

A small label that appears on hover or focus to provide additional context for an element.

Import

import { Tooltip, TooltipTrigger, TooltipContent } from '@tallyui/components';

Usage

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" size="icon">
      <Icon><Plus /></Icon>
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <Text>Add to library</Text>
  </TooltipContent>
</Tooltip>

Tooltip is a styled wrapper around the Tooltip primitive. It provides a compact, styled popover that appears on hover (web) or long-press (native). Content text is styled through TextClassContext so descendant Text components pick up text-sm text-popover-foreground automatically. For full accessibility and behavior details, see the primitive docs.

Components

TooltipContent

The floating label that appears near the trigger. Renders through a portal automatically.

Default classes: z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Distance in pixels between the trigger and the tooltip
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Which side of the trigger to position the tooltip
`className`	`string`	--	Additional NativeWind classes merged via `cn()`

Plus all props from the Tooltip primitive's Content component.

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state
`defaultOpen`	`boolean`	--	Uncontrolled initial open state
`onOpenChange`	`(open: boolean) => void`	--	Called when the open state changes
`delayDuration`	`number`	--	How long to wait before showing the tooltip (ms)

TooltipTrigger accepts asChild to merge props onto a custom child element.

Examples

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon">
      <Icon><Settings /></Icon>
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <Text>Settings</Text>
  </TooltipContent>
</Tooltip>

Different positions

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline"><Text>Top (default)</Text></Button>
  </TooltipTrigger>
  <TooltipContent side="top">
    <Text>Tooltip on top</Text>
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline"><Text>Bottom</Text></Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">
    <Text>Tooltip on bottom</Text>
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline"><Text>Left</Text></Button>
  </TooltipTrigger>
  <TooltipContent side="left">
    <Text>Tooltip on left</Text>
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline"><Text>Right</Text></Button>
  </TooltipTrigger>
  <TooltipContent side="right">
    <Text>Tooltip on right</Text>
  </TooltipContent>
</Tooltip>

const [open, setOpen] = useState(false);

<Tooltip open={open} onOpenChange={setOpen}>
  <TooltipTrigger asChild>
    <Button><Text>Hover me</Text></Button>
  </TooltipTrigger>
  <TooltipContent>
    <Text>Controlled: {open ? 'visible' : 'hidden'}</Text>
  </TooltipContent>
</Tooltip>