Tooltip

import { Tooltip } from '@yarcl/react';

Delete

<Tooltip content="Search" radius="md" padding="sm" textStyle="caption">
  <IconButton aria-label="Search"><SearchIcon /></IconButton>
</Tooltip>

• Opens after delay (400 ms) on hover, immediately on keyboard focus; closes on Esc.
• Sets aria-describedby on the trigger.
• radius, padding and textStyle use keys from your config and can be set in components.Tooltip.
• Keep the content short and plain. Tooltips can’t contain interactive elements; use HoverCard or Popover for that.

When the tooltip repeats the trigger’s accessible name, set describe={false} to avoid announcing the same text twice. The visible tooltip still appears on hover and keyboard focus, while an explicit description on the trigger is preserved. The default describes the trigger with the tooltip text.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Prop	Type	Default	Description
children required	ReactElement		A single focusable element, e.g. an IconButton.
content required	ReactNode		Short text describing the trigger. Keep it plain; tooltips can't contain interactive content.
delay	number	config.timing.tooltipDelay	Delay before opening on hover, in ms. Opens immediately on keyboard focus.
describe	boolean	true	Adds the tooltip as an accessible description. Disable when it repeats the trigger's name.
padding	Responsive<Spacing>config	config.components.Tooltip.padding ?? config.defaults.padding	Inner spacing, from the spacing config. Accepts a scalar or breakpoint map.
placement	Placement	'top'	Preferred side. Flips when there isn't room.
radius	Radiusconfig	config.components.Tooltip.radius ?? config.defaults.radius	Corner radius, from the radii config.
ref	Ref<Element>
textStyle	TextStyleconfig	config.components.Tooltip.textStyle ?? config.defaults.helperStyle	Typography style, from the typography.styles config.