Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

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 {...tooltip} as={Button}>
        Reference
      </TooltipReference>
      <Tooltip {...tooltip}>Tooltip</Tooltip>
    </>
  );
}

#Abstracting

You can build your own Tooltip component with a different API on top of Reakit.

import React from "react";
import {
  useTooltipState,
  Tooltip as ReakitTooltip,
  TooltipReference
} 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.

  • unstable_animated number | boolean

    If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

  • 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

3 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • visible boolean

    Whether it's visible or not.

  • unstable_animated number | boolean

    If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

  • unstable_stopAnimation () => void

    Stops animation. It's called automatically if there's a CSS transition. It's called after given milliseconds if animated is a number.

#TooltipArrow

  • size string | number | undefined

    Arrow's size

1 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

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

    Actual placement.

#TooltipReference

3 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • unstable_referenceRef RefObject<HTMLElement | null>

    The reference element.

  • show () => void

    Changes the visible state to true

  • hide () => void

    Changes the visible state to false