Skip to content

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

Free

Label with Tooltip for React

An API Key label with an info button beside it. The tooltip reads Your secret API key for authentication.

API Key sits next to a small info button. The button's tooltip reads Your secret API key for authentication.

Use an info button when the explanation is longer than a subtitle and not everyone needs it. A line under a Field label is better when everyone should see it. On React, Base UI does not write the tooltip.

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

Label anatomy: label, control, text

Usage

<div className="flex items-center gap-1">
  <Label>API Key</Label>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger
        render={
          <Button
            aria-label="About the API key"
            size="icon-xs"
            variant="ghost"
          />
        }
      >
        <InfoIcon aria-hidden="true" className="text-muted-foreground" />
      </TooltipTrigger>
      <TooltipContent>Your secret API key for authentication</TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

FAQ

What does the info control open?

A tooltip that says Your secret API key for authentication. The label says API Key, and the label and the button sit in a row with flex items-center gap-1.

How is the info control marked up?

It is a Button with variant="ghost", size="icon-xs" and aria-label="About the API key". The icon is aria-hidden and uses text-muted-foreground. It sits beside the Label, not inside it, so a click on the caption doesn't land on the button.

How is that control attached to the tooltip?

TooltipTrigger receives the button through render. A TooltipProvider wraps the tooltip.

How do I change how soon the tooltip opens?

This demo leaves the delay at the default. Set it on the trigger or the provider. Use delay and closeDelay on TooltipTrigger, or delay on a TooltipProvider.

Does this tooltip open on a touch screen?

Not from a hover. Touch screens have no hover, so it shows when the trigger is focused. For a note people must be able to read on a phone, use a Toggle Tooltip, which opens on tap.

Can you open this tooltip from the keyboard?

Yes. It opens when the trigger is focused, and Escape closes it. The trigger is the button. Base UI does not link the tooltip text to it, which is why the button has aria-label="About the API key".

API Reference

Label

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

Tooltip

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

Button

Sets aria-label="About the API key", size="icon-xs" and variant="ghost". The rest is on the Button page.

All 8 label examples