Skip to content

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

Free

Label with Tooltip for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not write the tooltip.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Label anatomy: label, control, text

Usage

<div class="flex items-center gap-1">
  <Label>API Key</Label>
  <Tooltip>
    <TooltipTrigger :asChild="true">
      <Button aria-label="About the API key" size="icon-xs" variant="ghost">
        <InfoIcon aria-hidden="true" class="text-muted-foreground" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Your secret API key for authentication</TooltipContent>
  </Tooltip>
</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 uses asChild around the button. No TooltipProvider is needed.

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 openDelay and closeDelay on Tooltip, or delay and closeDelay on a TooltipProvider around several tooltips.

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. The tooltip text is that button's description, so screen readers read it after About the API key.

API Reference

Label

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

Tooltip

Sets asChild. 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