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.
<span class="hstack gap-4">Partner license
<button class="btn btn-icon btn-xs btn-text" type="button" commandfor="tooltip-why-tip" command="toggle-popover" aria-label="What is a partner license" aria-describedby="tooltip-why-tip"><i class="bi bi-question-circle" aria-hidden="true"></i></button>
</span>
<div id="tooltip-why-tip" class="tooltip" popover role="tooltip">A partner can hide the brand and set their own help link.</div>From a title
Inside an element with data-tooltips - <html> 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.
<button class="btn btn-icon" type="button" title="Duplicate"><i class="bi bi-copy" aria-hidden="true"></i></button>
<button class="btn" type="button" aria-disabled="true" title="Publish needs a price for every season">Publish</button>
<span class="hstack gap-8"><span class="dot dot-warning" title="2 translations are outdated"></span>North Bay</span>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.
<button class="btn btn-icon" type="button" title="Duplicate"><i class="bi bi-copy" aria-hidden="true"></i></button>
<button class="btn btn-icon" type="button" title="Delete"><i class="bi bi-trash3" aria-hidden="true"></i></button>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, 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 <html> 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 <html> or a container shows the titles inside |