Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Tooltip for React

An outline button labeled Hover me. Its tooltip is the single line This is a tooltip, with no title and no icon.

An outline button says Hover me. Its tooltip is a single line, This is a tooltip.

Use a one-line tooltip to name a control that is not obvious on its own. A Popover fits if the note should stay open or hold a link. Base UI in React does not write the tooltip text.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Hover me
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

FAQ

When should I use tooltips versus other help patterns?

Use a Tooltip for a short, supplementary label, a few words that clarify a control people can already see. For a longer explanation, or content with links and inputs, use a Popover, which opens on click and stays open. Anything essential belongs on the page: hover-only text is easy to miss.

How does the Button become the tooltip trigger?

The trigger and the Button are one element, so there is no extra wrapper and no button nested in a button. TooltipTrigger renders the Button through render, with the label as its children.

How long should tooltips remain visible on hover?

As long as the trigger is hovered or focused: the Tooltip never times out while someone is reading it. It opens without a delay by default and closes when the pointer leaves or the trigger loses focus. Set delay and closeDelay on TooltipTrigger, or delay on the TooltipProvider.

Are basic tooltips accessible to screen readers?

It opens when the trigger gets keyboard focus and closes on Escape. The trigger still needs its own accessible name, here its visible label, because the tooltip only supplements it. Base UI does not link the text to the trigger, so don't rely on the tooltip to name or describe the control.

Do tooltips work on mobile touch devices?

Not as a hover hint: touch screens have no hover, so a Tooltip mostly shows when its trigger gets focus. Make sure everything people need is readable without it, and use a Popover or inline text where a phone user must see the explanation.

What elements should trigger tooltips?

Elements people can focus: buttons, links and form controls, so keyboard users can open the Tooltip too. A disabled button gets no hover or focus, so wrap it in a span if it needs a tooltip. Give an icon-only button an aria-label, and mark the icon aria-hidden.

API Reference

Tooltip

No extra props in this demo. The rest is on the Tooltip page.

Button

Sets variant="outline". The rest is on the Button page.

All 8 tooltip examples