Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

Tooltip

Tooltip follows the WAI-ARIA Tooltip Pattern. It's a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { Button } from "reakit/Button";
import { Tooltip, TooltipReference, useTooltipState } from "reakit/Tooltip";

function Example() {
  const tooltip = useTooltipState();
  return (
    <>
      <TooltipReference as={Button} {...tooltip}>
        Reference
      </TooltipReference>
      <Tooltip {...tooltip}>Tooltip</Tooltip>
    </>
  );
}

#Abstracting

If the Reakit's API is too low level for you, you can create your own abstraction to ease your work.

import React from "react";
import { Button } from "reakit/Button";
import {
  Tooltip as ReakitTooltip,
  TooltipReference,
  useTooltipState
} from "reakit/Tooltip";

function Tooltip({ children, title, ...props }) {
  const tooltip = useTooltipState();
  return (
    <>
      <TooltipReference {...tooltip}>
        {referenceProps =>
          React.cloneElement(React.Children.only(children), referenceProps)
        }
      </TooltipReference>
      <ReakitTooltip {...tooltip} {...props}>
        {title}
      </ReakitTooltip>
    </>
  );
}

function Example() {
  return (
    <Tooltip title="Tooltip">
      <Button>Reference</Button>
    </Tooltip>
  );
}

#Accessibility

  • Tooltip has role tooltip.
  • TooltipReference has aria-describedby referring to Tooltip.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useTooltipState

  • visible boolean

    Whether it's visible or not.

  • placement "auto-start" | "auto" | "auto-end" | "top-start...

    Actual placement.

  • unstable_fixed boolean | undefined

    Whether or not the popover should have position set to fixed.

  • unstable_flip boolean | undefined

    Flip the popover's placement when it starts to overlap its reference element.

  • unstable_shift boolean | undefined

    Shift popover on the start or end of its reference element.

  • unstable_gutter number | undefined

    Offset between the reference and the popover.

  • unstable_preventOverflow boolean | undefined

    Prevents popover from being positioned outside the boundary.

  • unstable_boundariesElement "scrollParent" | "viewport" | "window" | undefined

    Boundaries element used by preventOverflow.

#Tooltip

  • visible boolean

    Whether it's visible or not.

  • unstable_animated boolean | undefined

    If true, the hidden element attributes will be set in different timings to enable CSS transitions. This means that you can safely use the .hidden selector in the CSS to create transitions.

    • When it becomes visible, immediatelly remove the hidden attribute, then add the hidden class.
    • When it becomes hidden, immediatelly remove the hidden class, then add the hidden attribute.

#TooltipArrow

  • placement "auto-start" | "auto" | "auto-end" | "top-start...

    Actual placement.

#TooltipReference

  • unstable_referenceRef RefObject<HTMLElement | null>

    The reference element.

  • show () => void

    Changes the visible state to true

  • hide () => void

    Changes the visible state to false