Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Label with Tooltip for React

A label with an info button that opens a tooltip explaining the field.

Framework
UI library

Keep a technical caption short and put the explanation one hover or focus away. The Label says API Key, and a ghost icon button beside it opens a Tooltip that reads Your secret API key for authentication. Use it when a description under the field would crowd the form.

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

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".

All 8 label examples