Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

function TooltipExample() {
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <span>Tooltip</span>
      </Tooltip.Trigger>
      <Tooltip.Content>
        <span>Tooltip</span>
      </Tooltip.Content>
    </Tooltip>
  );
}

Props

children

required

TypeReactNode

Tooltip reference element.

initialOpen

Typeboolean

If true, the component is shown at initial

onOpenChange

Typesignature

Callback fired when the component requests to be open.

open

Typeboolean

If true, the component is shown.

placement

TypePlacement

Tooltip placement.

CSS Variables

Color

--ax-public-tooltip-blue-background

--ax-public-tooltip-blue-text-color

--ax-public-tooltip-default-background

--ax-public-tooltip-text-color

Spacing

--ax-public-tooltip-padding

Radius

--ax-public-tooltip-radius-size