Tooltip - Ariakit

Display information related to an anchor element when the element receives keyboard focus or the mouse hovers over it. This component is based on the WAI-ARIA Tooltip Pattern.

Tooltip

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

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 "./style.css";
import * as Ariakit from "@ariakit/react";

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>

Tooltips are descriptions

By default, tooltips describe the element they are attached to (the anchor element) and are referenced by the aria-describedby attribute.

You should make sure the anchor element has an accessible name, either by:

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

Alternatively, if you want to use the tooltip as a label, you must set the type prop to label:

<TooltipProvider type="label">
<TooltipProvider type="label">

This will make the tooltip behave like a label and will use the aria-labelledby attribute on the anchor element. Additionally, the tooltip's role attribute will be set to none.

Related components

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

View all components

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue