---
title: "Tooltip"
description: "A short label that appears on hover or keyboard focus. It explains a control; it never holds essential information."
kind: component
id: C-035
registry: "tooltip"
docs: "https://koten.codehive.com.co/components/tooltip"
markdown: "https://koten.codehive.com.co/md/components/tooltip.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/tooltip.json"
language: en
---

# Tooltip · ヒント

> Component C-035 in the Koten UI catalog.

A short label that appears on hover or keyboard focus. It explains a control; it never holds essential information.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/tooltip.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/tooltip.json
```

## Files

- `@/components/ui/tooltip.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **portal** — Portaled popup: The popup mounts in BaseTooltip.Portal to escape table and panel scrolling; its Positioner places it next to the trigger.

## Reference

- Upstream primitive: https://base-ui.com/react/components/tooltip

## Examples

### Contextual help

Two triggers with a 200 ms delay; the second opens downwards.

```tsx
<Tooltip trigger={<Button variant="ghost">What is this?</Button>}>
  Opens the order details without leaving the table.
</Tooltip>

<Tooltip trigger={<Button variant="outline">Estimated cost</Button>} side="bottom">
  Includes taxes and standard shipping.
</Tooltip>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `trigger` | `ReactElement` | `—` | The element that receives hover and focus; it keeps its own accessible name. |
| `children` | `ReactNode` | `—` | The tooltip text; keep it to one or two lines. |
| `delay` | `number` | `200` | Milliseconds before showing; applied on the internal Provider. |
| `side` | `top \| right \| bottom \| left` | `top` | Preferred side; the Positioner flips it when it does not fit. |

## Accessibility

- It appears on hover and on keyboard focus, not only with the pointer.
- It describes the trigger and never replaces it: the accessible name stays on the trigger.
- Escape hides it without moving focus, and it never contains interactive controls.

## Sources

- Catalog page: https://koten.codehive.com.co/components/tooltip
- Markdown: https://koten.codehive.com.co/md/components/tooltip.md
- Repository: https://github.com/codehive-colombia/koten