Tooltip

Display visual information related to an anchor element when the element receives keyboard focus or the mouse hovers over it.

Tooltip

Edit example

12345678910111213141516171819
import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Ariakit.TooltipProvider>
      <Ariakit.TooltipAnchor
        className="link"
        render={<a href="https://ariakit.org/components/tooltip" />}
      >
        Tooltip
      </Ariakit.TooltipAnchor>
      <Ariakit.Tooltip className="tooltip">
        https://ariakit.org/components/tooltip
      </Ariakit.Tooltip>
    </Ariakit.TooltipProvider>
  );
}

import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Ariakit.TooltipProvider>
      <Ariakit.TooltipAnchor
        className="link"
        render={<a href="https://ariakit.org/components/tooltip" />}
      >
        Tooltip
      </Ariakit.TooltipAnchor>
      <Ariakit.Tooltip className="tooltip">
        https://ariakit.org/components/tooltip
      </Ariakit.Tooltip>
    </Ariakit.TooltipProvider>
  );
}

Examples

Tooltip with Framer MotionAbstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.

View all Tooltip examples

API

useTooltipStore()
useTooltipContext()

<TooltipProvider>
  <TooltipAnchor />
  <Tooltip>
    <TooltipArrow />
  </Tooltip>
</TooltipProvider>
useTooltipStore()
useTooltipContext()

<TooltipProvider>
  <TooltipAnchor />
  <Tooltip>
    <TooltipArrow />
  </Tooltip>
</TooltipProvider>

Tooltip anchors must have accessible names

By default, tooltips serve as non-critical visual descriptions and shouldn't be used as accessible labels for the anchor element. You must ensure the anchor element has an accessible name, either by:

Rendering a visible label or VisuallyHidden text within the anchor element.
Using the aria-label⁠ or aria-labelledby⁠ attributes on the anchor element.

Moreover, the TooltipAnchor component should be rendered as an accessible widget through composition, like a button or a link, so it's properly announced by screen readers when it gains focus.

Related components

HovercardShow a Popover with additional information when users hover over an element.

View all components

Examples

API

Tooltip anchors must have accessible names

Related components

Stay tuned