Tooltip

A small informational popup that appears on hover or focus, providing additional context for an element.

Import

tsx

import { Tooltip } from '@tac-ui/web';

Playground

Interactively configure the Tooltip props below.

Content

Placement

tsx

<Tooltip content="This is a tooltip" placement="top">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Default

Wrap any element with Tooltip and provide a content string. The tooltip appears after a configurable delay (default 200 ms) and is anchored to the top of the trigger by default.

tsx

<Tooltip content="This is a tooltip">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Placements

Use the placement prop to control which side of the trigger the tooltip appears on. All four directions are supported: top, bottom, left, and right.

tsx

<Tooltip content="Appears on top" placement="top">
  <Button variant="outline">Top</Button>
</Tooltip>
<Tooltip content="Appears on bottom" placement="bottom">
  <Button variant="outline">Bottom</Button>
</Tooltip>
<Tooltip content="Appears on left" placement="left">
  <Button variant="outline">Left</Button>
</Tooltip>
<Tooltip content="Appears on right" placement="right">
  <Button variant="outline">Right</Button>
</Tooltip>

With Description

Providing a description prop switches the tooltip to rich mode: the content becomes a bold title and the description is rendered as smaller secondary text below it.

tsx

<Tooltip
  content="Save document"
  description="Saves the current file to your account."
  placement="bottom"
>
  <Button variant="secondary">Save</Button>
</Tooltip>
<Tooltip
  content="Delete item"
  description="This action cannot be undone."
  placement="bottom"
>
  <Button variant="outline">Delete</Button>
</Tooltip>

Custom Delay

Set the delay prop (in milliseconds) to control how long the user must hover before the tooltip appears. Use 0 for instant tooltips or a longer delay for less intrusive ones.

tsx

<Tooltip content="Instant tooltip" delay={0} placement="top">
  <Button variant="ghost">No delay</Button>
</Tooltip>
<Tooltip content="Slow tooltip" delay={800} placement="top">
  <Button variant="ghost">800 ms delay</Button>
</Tooltip>

API Reference

Prop	Type	Default	Description
content	React.ReactNode	-	The main tooltip label text. Acts as a title when description is also provided.
description	string	-	Optional secondary text shown below content in rich tooltip mode.
placement	"top" \| "bottom" \| "left" \| "right"	"top"	Where the tooltip appears relative to its trigger element.
delay	number	200	Delay in milliseconds before the tooltip appears after hover or focus.
children	React.ReactElement	-	The trigger element. Must be a single React element; aria-describedby is injected automatically.