Overlays

Tooltip

A short accessible description shown on hover or keyboard focus.

TooltipView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Button, Tooltip } from "innate-ui";
import classes from "../docs.module.css";
import { Icon } from "@/docs/icons/Icon";

export function TooltipDemo() {
  return (
    <div class={classes.tooltipButtons}>
      <Tooltip id="add-tooltip">
        <Tooltip.Trigger>
          <Button variant="ghost" ariaLabel="Add" class={classes.tooltipButton}>
            <Icon name="plus" />
          </Button>
        </Tooltip.Trigger>
        <Tooltip.Content>Add</Tooltip.Content>
      </Tooltip>

      <Tooltip id="language-tooltip">
        <Tooltip.Trigger>
          <Button variant="ghost" ariaLabel="Change language" class={classes.tooltipButton}>
            <Icon name="translate" />
          </Button>
        </Tooltip.Trigger>
        <Tooltip.Content>Change language</Tooltip.Content>
      </Tooltip>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

TooltipProps

Prop	Type	Default
`id`required Stable id used by the trigger's `aria-describedby` relationship.	`string`	`—`
`children`required Tooltip trigger and content parts.	`JSX.Children`	`—`
`openDelay` Delay in milliseconds before opening when the provider is not warm.	`JSX.ValueOrCell<number>`	`—`
`closeDelay` Delay in milliseconds before closing after pointer leave or blur.	`JSX.ValueOrCell<number>`	`80`
`onOpenChange` Called when the tooltip open state changes.	`(open: boolean) => void`	`—`
`open` Whether the popover is open.	`JSX.ValueOrCell<boolean>`	`false`
`side` Preferred side of the anchor.	`JSX.ValueOrCell<PopoverSide>`	`"bottom"`
`align` Preferred alignment along the anchor edge.	`JSX.ValueOrCell<PopoverAlign>`	`"center"`

Inspect the typed source →