# Tooltips
A short dark label beside a control. A small button opens it as a toggletip, which a click outside or `Esc` closes; or an element's own title shows it on hover and focus.
## Examples
The tooltip is a `popover` opened by its button's command. It sits above the button and turns below when there is no room - `js/menu-place.js` keeps it beside its button where an engine cannot.
```html
Partner license
A partner can hide the brand and set their own help link.
```
### From a title
Inside an element with `data-tooltips` - `` for the whole page - an element's own `title` shows as this tooltip: after a short hover by a mouse, at once when the keyboard's focus lands on it, but not when the focus comes back from a closed menu or dialog, where the person has just been. It says why a control cannot run, what an icon button does, what a dot stands for. No markup but the title.
```html
North Bay
```
`data-tooltip-delay` on that element, or on any element around the title, sets the wait after a hover in milliseconds, 400 unless it says otherwise; `0` shows the tooltip as soon as the pointer is on it.
```html
```
On a folded side navigation a link's tooltip stands beside it, at the end of the rail, so it covers no other icon; the rail names its links from their words by itself.
A click or a tap on a control that cannot run - `aria-disabled="true"` with a title, as Publish above - shows its title for three seconds and says it politely, so the person learns why without a mouse.
## Keyboard and accessibility
- The button is named after its question; the tooltip's words answer it. Nothing that must be read to use the screen lives only in a tooltip.
- The button names its tooltip in `aria-describedby`, so a screen reader says the answer with the question, closed or open - opening a popover says nothing of its words.
- A tooltip from a title is the title itself to a screen reader: the element keeps its title on focus, and the tooltip is hidden from assistive technology. While a mouse rests on the element the title is held back, so the browser does not show its own as well; an icon button named only by its title keeps that name meanwhile.
- It stays while the pointer rests on it, hides on `Esc` without moving the focus, and never opens for a touch, which has no hover: on a phone, what a title says must be on the screen too.
- The label is the page's text color on the page color reversed: 4.5:1 in both themes, an outline in forced colors.
## Tokens
From [`css/components/tooltip.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/tooltip.css), which declares no custom property of its own.
It reads the theme's `--redz-space-4`, `--redz-space-8`, `--redz-radius-6`, `--redz-text`, `--redz-bg`, `--redz-fs-12`.
## From Bootstrap 5.3
| Bootstrap 5.3 | REDZ.UI | Change | Note |
| --- | --- | --- | --- |
| `bs-tooltip-auto` | - | remove | the tooltip is one element |
| `bs-tooltip-bottom` | - | remove | the tooltip is one element |
| `bs-tooltip-end` | - | remove | the tooltip is one element |
| `bs-tooltip-start` | - | remove | the tooltip is one element |
| `bs-tooltip-top` | - | remove | the tooltip is one element |
| `tooltip-arrow` | - | remove | the tooltip is one element |
| `tooltip-inner` | - | remove | the tooltip is one element |
| `data-bs-toggle="tooltip"` | `data-tooltips` | review | keep the title: data-tooltips on or a container shows every title inside as a tooltip; a toggletip for longer words |
| `data-bs-title` | `title` | rename | the element's own title, inside data-tooltips |
| `bootstrap.Tooltip` | - | remove | data-tooltips on or a container shows the titles inside |