Tooltip

Tooltip shows a short, contextual description of a control on hover or keyboard focus. It is paired with its trigger through TooltipTrigger, which manages the warmup delay, positioning, and dismissal.

Import

import {
  Tooltip,
  TooltipTrigger,
  ActionButton
} from '@proyecto-viviana/solid-spectrum';

Basic

Wrap a focusable trigger and a Tooltip in a TooltipTrigger. The tooltip appears on hover after a short delay, and immediately on keyboard focus.

<TooltipTrigger>
  <ActionButton aria-label="Edit">✎</ActionButton>
  <Tooltip>Edit</Tooltip>
</TooltipTrigger>

Placement

Set placement on the trigger to control which side the tooltip prefers; it flips automatically when there is not enough room.

<TooltipTrigger placement="bottom">
  <ActionButton aria-label="Download">↓</ActionButton>
  <Tooltip>Download</Tooltip>
</TooltipTrigger>

TooltipTrigger Props

Props

Prop	Type	Default	Description
`placement`	'top' \| 'bottom' \| 'start' \| 'end' \| 'left' \| 'right'	`'top'`	Preferred side of the trigger to render on; flips when space is tight
`delay`	number	`1500`	Warmup delay in milliseconds before the tooltip appears on hover
`isDisabled`	boolean	`false`	Whether the tooltip is suppressed entirely
`children`	JSX.Element	—	The trigger element followed by a Tooltip

Tooltip Props

Props

Prop	Type	Default	Description
`children`	JSX.Element	—	The tooltip's text content

Accessibility

The tooltip renders with role="tooltip"
The trigger references it via aria-describedby while it is open
Focusing the trigger with the keyboard shows the tooltip immediately, no delay
Escape dismisses the tooltip while keeping focus on the trigger
Only one tooltip is visible at a time across the app