Ariakit
/
/
This site is under construction Subscribe to updates

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.

import { Button } from "ariakit/button";
import { Tooltip, TooltipAnchor, useTooltipState } from "ariakit/tooltip";
import "./style.css";

export default function Example() {
  const tooltip = useTooltipState();
  return (
    <>
      <TooltipAnchor state={tooltip} as={Button} className="button secondary">
        Hover or focus on me
      </TooltipAnchor>
      <Tooltip state={tooltip} className="tooltip">
        Tooltip
      </Tooltip>
    </>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

useTooltipState()

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