# Tooltips
Use tooltips for short inline definitions that should not interrupt the reader's path.
Source: /docs/components/tooltips
Last modified: 2026-06-20
Tooltips are for tiny explanations. If the note needs a paragraph, use a callout, panel, or glossary page instead.

## Basic example

**Example**: API documentation helps developers understand how to integrate with your service.

```mdx title="tooltip-api.mdx"
API documentation helps developers understand how to integrate with your service.
```

An offer is the core object behind checkout.

```mdx title="tooltip-example.mdx"
An offer is the core object behind checkout.
```

## With a link

Use a linked tooltip when a short definition is useful inline, but the reader may need a full page next.

An offer timer can help create urgency without changing the checkout object.

```mdx title="tooltip-with-link.mdx"
An offer timer can help create urgency.
```

## Placement

Use `side="bottom"` inside dense headings, tables, or short panels where the top edge would clip the tooltip.


> **Inline glossary**
>

  The SDK examples assume the offer is already published.


```mdx title="tooltip-placement.mdx"
SDK
```

## Authoring rules


### Tooltip usage


- `Keep it short` (one or two sentences):
    Tooltips should clarify a word or phrase without becoming required reading.


- `Do not hide warnings` (visible constraints):
    If skipping the information can break implementation, use a callout or step instead.


- `Link real concepts` (href + cta):
    Use `href` and `cta` for terms such as offers, timers, SDKs, and webhooks when the site has a deeper page.


## Properties


- `tip` (string; required):
  Text displayed in the tooltip.


- `headline` (string):
  Text displayed before the `tip` text.


- `cta` (string):
  Call-to-action text for the link inside the tooltip.


- `href` (string):
  URL for the call-to-action link. Required when using `cta`.


## Plandalf extensions


- `side` (top | bottom; default: top):
  Preferred placement.


- `id` (string):
  Stable tooltip ID for accessibility when deterministic IDs matter.


- `class | className` (string):
  Optional utility classes for local spacing or text changes.


## Related


  - [Callouts](/docs/components/callouts): Use for important warnings.
  - [Badge](/docs/components/badge): Use compact labels.
  - [Disclosure](/docs/components/disclosure-views): Use for optional detail.