Skip to content
StrataKit Docs

Tooltip API

Component status:
stable

Import

Section titled “Import”
import { Tooltip } from "@stratakit/bricks";
// OR
import Tooltip from "@stratakit/bricks/Tooltip";

Tooltip

Section titled “Tooltip”
Base element: <div>

A tooltip component that provides additional information or context for an interactive trigger element.

Example usage:

<Tooltip content="This is a tooltip">
  <button>Hover over me</button>
</Tooltip>

Note: The trigger element must be a single interactive element, such as a button or link. Do not add a tooltip to a non-interactive static element (such as a <div> or <svg>).

Note: If type is set to "none", the tooltip will not use ARIA attributes.

children

Section titled “children”
Type: ReactElement<unknown, string | JSXElementConstructor<any>> (required)

The element that will trigger the tooltip when hovered or focused. Common examples include buttons, links, or form controls.

Note: The trigger must be a single interactive element. Do not add a tooltip to a non-interactive static element (such as a <div> or <svg>). Also, the trigger element must forward its ref and spread its props.

content

Section titled “content”
Type: ReactNode (required)

The content to be displayed inside the tooltip when the trigger element is hovered or focused.

defaultOpen

Section titled “defaultOpen”
Type: boolean | undefined (optional)
Default: false

Whether the content should be visible by default.

open

Section titled “open”
Type: boolean | undefined (optional)

Controls the open state of the dialog. This is similar to the open attribute on native dialog elements.

placement

Section titled “placement”
Type: Placement | undefined (optional)

The placement of the tooltip.

When not enough space is available to satisfy the specified placement, the tooltip will automatically flip to the opposite side.

setOpen

Section titled “setOpen”
Type: ((open: boolean) => void) | undefined (optional)

A callback that gets called when the open state changes.

type

Section titled “type”
Type: "label" | "description" | "none" | undefined (optional)
Default: "description"

Determines how ARIA attributes are applied to the tooltip for accessibility:

  • "description": The tooltip provides additional information via aria-describedby.
  • "label": The tooltip acts as a label for the trigger element via aria-labelledby.
  • "none": No ARIA attributes are applied; the tooltip is only for visual assistance.

unmountOnHide

Section titled “unmountOnHide”
Type: boolean | undefined (optional)
Default: false

When set to true, the content element will be unmounted and removed from the DOM when it’s hidden.

Additional props

Section titled “Additional props”