# Shadcn Label Badges

> Tooltip with label badges

- Type: example, free and open source (MIT)
- Component: [Tooltip](https://reui.io/components/tooltip.md)
- Page: https://reui.io/components/tooltip/c-tooltip-15
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/tooltip.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/tooltip.md
- MCP: `get_example("c-tooltip-15")`
- Registry item: https://reui.io/r/styles/base-nova/c-tooltip-15.json
- Uses: Badge, Tooltip

## Best for

A compact 3 labels count with a tag glyph that expands into 3 colored chips under a Labels heading

## Agent notes

- The 3 labels text and the Bug, Frontend and High Priority `Badge` chips are separate literals; derive the count from your label list

## When not to use

- Labels that should stay visible on the row rather than behind a count: use [Badge](https://reui.io/components/badge.md) (`get_component("badge")`)

## Install

```bash
npx shadcn@latest add @reui/c-tooltip-15
```

## About Shadcn Tooltip

### When to use

- Short labels for buttons and icon only toolbar actions, with a keyboard shortcut where one exists
- Help text on an info icon, a warning, a verified mark, a locked feature or a disabled button
- Compact summaries behind a trigger, such as service status, notifications, file details or a person

### When not to use

- Content with links or buttons that keyboard users must be able to reach: use [Popover](https://reui.io/components/popover.md) (`get_component("popover")`)
- A rich profile or page preview with a large photo, bio and dates: use [Hover Card](https://reui.io/components/hover-card.md) (`get_component("hover-card")`)
- A status or count that stays readable without pointing at anything: use [Badge](https://reui.io/components/badge.md) (`get_component("badge")`)

### Agent notes

- Outside a `TooltipProvider` the base `Tooltip` opens after 600ms and inside one at once; the radix `Tooltip` throws without one
- `TooltipTrigger` renders a `button` of its own, so a `Button` nested in it without `render` or radix `asChild` makes a button in a button
- `TooltipContent` is portaled to the end of the body with no focus guards, so a link or button in it is not next in Tab order after its trigger

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.