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.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
render={<a href="" />}
<Ariakit.Tooltip className="tooltip">



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:

Alternatively, if you want to use the tooltip as a label, you must set the type prop to 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.

Follow updates

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

Read latest issue

No Spam. Unsubscribe at any time.