Ariakit
/

Tooltip

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
Tooltip
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
className="link"
render={<a href="https://ariakit.org/components/tooltip" />}
>
Tooltip
<Ariakit.Tooltip className="tooltip">
https://ariakit.org/components/tooltip
);
}

Examples

API

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.