Tooltip

Tooltip displays brief supplemental information on hover or focus. Use for short labels or hints that should not receive interactive content.

Wrap a group of tooltips in TooltipProvider when they should share timing configuration.

Basic usage

Code

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Delivery window
    </TooltipTrigger>

    <TooltipContent>
      <p>Estimated from current route capacity.</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Multiple Tooltips

Code

<TooltipProvider>
  <div className="tw:flex tw:flex-wrap tw:gap-2">
    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" className="tw:capitalize">
            left
          </Button>
        }
      />

      <TooltipContent side="left">
        <p>Shown to the left of the trigger.</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" className="tw:capitalize">
            top
          </Button>
        }
      />

      <TooltipContent side="top">
        <p>Shown above the trigger.</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" className="tw:capitalize">
            bottom
          </Button>
        }
      />

      <TooltipContent side="bottom">
        <p>Shown below the trigger.</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" className="tw:capitalize">
            right
          </Button>
        }
      />

      <TooltipContent side="right">
        <p>Shown to the right of the trigger.</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

API

Tooltip

Name	Type/Description
actionsRef	RefObject<TooltipRootActions | null> | undefined A ref to imperative actions. - `unmount`: Unmounts the tooltip popup. - `close`: Closes the tooltip imperatively when called.
children	ReactNode | PayloadChildRenderFunction<unknown> The content of the tooltip. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen = false	boolean | undefined Whether the tooltip is initially open. To render a controlled tooltip, use the `open` prop instead.
defaultTriggerId	string | null | undefined ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
disabled = false	boolean | undefined Whether the tooltip is disabled.
disableHoverablePopup = false	boolean | undefined Whether the tooltip contents can be hovered without closing the tooltip.
handle	TooltipHandle<unknown> | undefined A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method.
onOpenChange	((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void) | undefined Event handler called when the tooltip is opened or closed.
onOpenChangeComplete	((open: boolean) => void) | undefined Event handler called after any animations complete when the tooltip is opened or closed.
open	boolean | undefined Whether the tooltip is currently open.
trackCursorAxis = "'none'"	"none" | "both" | "x" | "y" | undefined Determines which axis the tooltip should track the cursor on.
triggerId	string | null | undefined ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `open` prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).

TooltipContent

Name	Type/Description
align = "center"	Align | undefined How to align the popup relative to the specified side.
alignOffset = 0	number | OffsetFunction | undefined Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.width : anchor.height; }} /> ```
anchor	Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null | undefined An element to position the popup against. By default, the popup will be positioned against the trigger.
className	string | ((state: TooltipPopupState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipPopupState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
side = "top"	Side | undefined Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
sideOffset = 4	number | OffsetFunction | undefined Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.height : anchor.width; }} /> ```
style	CSSProperties | ((state: TooltipPopupState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

TooltipProvider

Name	Type/Description
closeDelay	number | undefined How long to wait before closing a tooltip. Specified in milliseconds.
delay = 0	number | undefined How long to wait before opening a tooltip. Specified in milliseconds.
timeout = 400	number | undefined Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds.

TooltipTrigger

Name	Type/Description
className	string | ((state: TooltipTriggerState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
closeDelay = 0	number | undefined How long to wait before closing the tooltip. Specified in milliseconds.
closeOnClick = true	boolean | undefined Whether the tooltip should close when this trigger is clicked.
delay = 600	number | undefined How long to wait before opening the tooltip. Specified in milliseconds.
disabled = false	boolean | undefined If `true`, the tooltip will not open when interacting with this trigger. Note that this doesn't apply the `disabled` attribute to the trigger element. If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop.
handle	TooltipHandle<unknown> | undefined A handle to associate the trigger with a tooltip.
payload	unknown A payload to pass to the tooltip when it is opened.
ref	((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipTriggerState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: TooltipTriggerState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.