# Tooltip

> Tooltip on hover and from the keyboard, without JavaScript.

The bubble is a real element that CSS reveals. It therefore appears on hover
**and on keyboard focus**, and it is linked to the term through
`aria-describedby`: a screen reader announces it instead of ignoring it.

## On hover, from the keyboard

Hover the term with the mouse, or reach it with the Tab key.

The <Tooltip text="Turning the sources into HTML pages ready to serve.">build</Tooltip> produces a complete folder, and the <Tooltip text="All the pages of one version of the documentation.">version</Tooltip> is its root.

```mdx
The <Tooltip text="Turning the sources…">build</Tooltip> produces a folder.
```

## The four sides

Hover each one: <Tooltip text="Above" placement="top">top</Tooltip>, <Tooltip text="Below" placement="bottom">bottom</Tooltip>, <Tooltip text="On the left" placement="left">left</Tooltip> and <Tooltip text="On the right" placement="right">right</Tooltip>.

```mdx
<Tooltip text="On the right" placement="right">
  term
</Tooltip>
```

The side is chosen according to the available space: `top` by default,
`bottom` when the term is at the top of the page, `left` or `right` in a narrow
column.

## On a technical term

Useful to explain an identifier without weighing down the sentence.

The <Tooltip text="Deployment prefix, derived from the sub-path of siteUrl when it is not written."><code>baseUrl</code></Tooltip> field prefixes every internal link, and <Tooltip text="Version served by default. At most one."><code>current</code></Tooltip> designates the one the root serves.

```mdx
The <Tooltip text="Deployment prefix."><code>baseUrl</code></Tooltip> field prefixes the links.
```

## In a table

| Field        | Role                                                                                                 |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| `slug`       | <Tooltip text="It shows up in /versions/<slug>/ and gives the branch its name.">Identifier</Tooltip> |
| `current`    | <Tooltip text="The site root redirects to it.">Version served by default</Tooltip>                   |
| `prerelease` | <Tooltip text="Banner on every page, and noindex in the head.">Version in preparation</Tooltip>      |

## In a card

A card does not clip what sticks out: the bubble comes out of it.

<Columns>
  <Column span={6}>
    <Card>
      <CardBody>
        A <Tooltip text="The bubble comes out of the card, it is not cut.">term</Tooltip> in a card.
      </CardBody>
    </Card>
  </Column>
  <Column span={6}>
    <Card>
      <CardBody>
        And{' '}
        <Tooltip text="Opened downwards." placement="bottom">
          another
        </Tooltip>{' '}
        below.
      </CardBody>
    </Card>
  </Column>
</Columns>

## A long text

The bubble is capped at about sixteen rem wide, then wraps.

See the <Tooltip text="A published version stays in the state in which it was produced. Rebuilding it is never necessary, and nothing would guarantee it gives the same result years later.">reason for version branches</Tooltip> for the details.

## The look through className

A `className` lands on the term, not on the bubble: it is the term the reader
sees before hovering anything.

<ForTheme framework="tailwind">

A term marked <Tooltip className="text-indigo-500 font-medium" text="It now carries the accent colour, and a heavier weight.">more firmly</Tooltip> than the others.

```mdx
<Tooltip className="text-indigo-500 font-medium" text="…">
  more firmly
</Tooltip>
```

</ForTheme>
<ForTheme framework="custom">

A term marked <Tooltip className="accent-text" text="It now carries the accent colour of the theme.">more firmly</Tooltip> than the others.

```mdx
<Tooltip className="accent-text" text="…">
  more firmly
</Tooltip>
```

```css
/* theme/99-docpensieve.css */
.accent-text {
  color: var(--dp-accent);
}
```

</ForTheme>

`style` works the same way, for a one-off adjustment that needs no class.

## What it cannot do

The bubble is positioned absolutely: inside a container that **clips its
overflow** — an `overflow: hidden` — it will be cut. That is the limit of a
tooltip without JavaScript, and it is accepted: placing the bubble outside the
flow would take a script on every page.

The shipped components avoid that clipping wherever they can — a `Card` rounds
the corners of its image one by one rather than clipping its content.

The bubble does not close with the Escape key: listening for it would take a
script, and components load none. It disappears when the pointer or the focus
leaves the term.

A `Tooltip` without text stops the build: a hover with no effect goes
unnoticed for a long time. So does an unknown side.

A tooltip explains a term without leaving the sentence. A remark that needs
its own space is an [Admonition](/versions/latest/components/admonition/) instead.