---
title: "Tooltip"
description: "A small floating label that appears above an element on hover or focus."
---

A hover bubble. It is a hint, never the only place information lives — a control whose meaning is only in its tooltip is a control with no accessible name.

_Live example of Tooltip — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add tooltip
```

Files written — React: components/ui/tooltip.tsx. Vue: components/ui/tooltip/Tooltip.vue, components/ui/tooltip/TooltipTrigger.vue, components/ui/tooltip/TooltipContent.vue, components/ui/tooltip/index.ts.

## Usage

React:

```tsx
import { Tooltip } from "@/components/ui/tooltip"
```

Vue:

```ts
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
```

## API reference

**`Tooltip`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `ReactNode` | — | What the bubble says. |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"top"` | Preferred side. Flips when there is no room. |

Every part also accepts the native attributes of the element it renders, and a `className` that is merged rather than replaced.

## Accessibility

The bubble is linked to its trigger with `aria-describedby`, so it is read as a description rather than as the name. It opens on focus as well as hover, and `Escape` dismisses it. Do not put a control inside a tooltip: it cannot be reached by keyboard.

## Tokens

Tooltip reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.