Pickers and overlays

Tooltip

A short description revealed from an existing control.

When to use it: Use it for brief help, never for essential instructions.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Tooltip.tsxtsx

import { Tooltip, TooltipArrow, TooltipPopover, TooltipTrigger } from "@comp0/react";

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger className="rounded border border-zinc-950/10 px-3 py-2.5 text-base text-zinc-800 sm:py-2 sm:text-sm dark:border-white/10 dark:text-zinc-100">
        Hover or focus
      </TooltipTrigger>
      <TooltipPopover
        placement="top"
        offset={6}
        className="w-max translate-y-0 overflow-visible rounded border-0 bg-zinc-900 px-2 py-1 text-base text-white opacity-100 transition-[opacity,translate] duration-150 ease-out starting:translate-y-1 starting:opacity-0 motion-reduce:transition-none sm:text-sm dark:bg-zinc-100 dark:text-zinc-900"
      >
        Helpful context
        <TooltipArrow className="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-zinc-900 dark:bg-zinc-100" />
      </TooltipPopover>
    </Tooltip>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Tooltip
Open-state provider. Does not add a DOM element.
TooltipTrigger
Element that reveals help on focus or hover. Owns a DOM element.
TooltipPopover
Short descriptive text. Owns a DOM element.
TooltipArrowOptional
Optional decorative caret inside TooltipPopover; style it to point at the trigger. Owns a DOM element.

Step by step

1
Add the main part
Start Tooltip with the control people already use.
2
Add the supporting parts
Add TooltipPopover with one short explanation, placed on the side you want, and a TooltipArrow caret styled to point back at the trigger.

Make the behavior clear

Give an icon-only trigger its own aria-label too.

Exampletsx

<Tooltip><TooltipTrigger aria-label="More information">i</TooltipTrigger><TooltipPopover placement="top" offset={6}>Helpful detail<TooltipArrow /></TooltipPopover></Tooltip>

Keyboard

Esc: Closes the tooltip.
⇥: Focus reveals the tooltip on its trigger.

Forms and accessibility

No native form behavior.

Accessibility checklist

Give the trigger its own accessible name.
Keep tooltip text brief and descriptive.
Do not put required interactive content inside a tooltip.

API reference

Importtsx

import { Tooltip, TooltipArrow, TooltipPopover, TooltipTrigger } from "@comp0/react";

`Tooltip`

Context only

Open-state provider.

Prop	Type	Description
`open / defaultOpen`	`boolean`	Controlled or initial open state.
`onToggle`	`(open: boolean) => void`	Receives the next open state.

`TooltipTrigger`

DOM element

Element that reveals help on focus or hover.

Prop	Type	Description
`as`	`ElementType \| Fragment`	Fragment merges the trigger onto your own element child.

`TooltipPopover`

DOM element

Short descriptive text.

Prop	Type	Description
`placement`	`PopoverPlacement`	Trigger side to open on, such as "top" or "bottom start"; flips when there is no room.
`offset`	`number`	Pixel gap between the trigger and the tooltip.

`TooltipArrow`

OptionalDOM element

Optional decorative caret inside TooltipPopover; style it to point at the trigger.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-open] on TooltipTrigger, TooltipPopover: The tooltip is visible.
:popover-open on TooltipPopover: Native pseudo-class equivalent.