UITooltips and popovers
Small floating notes next to an element: a tooltip names it, a popover explains it.
A tooltip is a one-line name or hint shown on hover and focus. A popover is a small card with a title and a few lines, opened on click. Neither holds anything the user needs in order to continue.
When to use it
Use it
- Tooltip: name an icon-only button, or give a short hint.
- Popover: explain a term or a setting in two or three lines.
- Open them on focus as well as on hover.
Don't
- Put essential information, links or buttons in a tooltip.
- Use a popover for a form or a long text; use a modal or a page.
- Cover the element they describe.
Anatomy
A tooltip is a box (tooltip) with an arrow and an inner text. A popover is a box (popover) with an arrow, a header and a body. Both point at their trigger from the side that has room.
Variants and states
This Moodle version has no dark mode: examples stay light.
Enrolment key
This Moodle version has no dark mode: examples stay light.
The tip of a title
A button with only an icon, a link that opens elsewhere or a badge that needs explaining carries a title. The browser draws that text in a grey box that cannot be styled, so the design system shows it in its own tip: a dark bubble with an arrow, a little rounder with the Didactika theme. It appears after a short wait under the pointer and at once with the keyboard, goes away on leaving, on a click, on Escape and on scrolling, and keeps an accessible name for the element. Hover or tab to the examples below.
This Moodle version has no dark mode: examples stay light.
The tip is for a short label (a few words). Anything longer, with a link or a button, is a popover.
Combinations
| Combination | Use it for |
|---|---|
| Tooltip × icon button | Names a button that has only an icon; always together with its aria-label. |
| Popover × term | Explains a term or a setting in two or three lines, opened on click. |
| Placement | Top by default; the note flips to the other side when there is no room. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The tooltip is dark with light text | It is the only dark thing that floats, so it is never mistaken for content, and it reads over any background. |
| The popover is a card with a title and a quiet body | It is a small page of its own: it has a heading and room, not just a coloured box. |
| They flip when there is no room | The note is never cut off at the edge of the screen or of its container. |
Classes
| Class | What it does |
|---|---|
tooltip, tooltip-inner |
The note and its text |
popover, popover-header, popover-body |
The card and its parts |
tooltip-arrow, popover-arrowarrow |
The pointer |
data-bs-toggle, data-bs-placement |
What opens it and on which side |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The sides are top, bottom, start and end.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The sides are top, bottom, left and right.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The sides are top, bottom, left and right.
Accessibility
- The trigger is focusable and the tooltip opens on focus, and Escape closes it.
- A tooltip is linked with
aria-describedby; do not use it as the only label of a control. - A popover can be reached by keyboard and closes with Escape.