Tooltips
A short label for a control that cannot carry one. It appears on hover and on keyboard focus — a control you can only learn about with a mouse is no help to anyone else.
On a row of icon buttons
hover one, then tab through them
Print this invoice
Download the PDF
Email it to the customer
Copy it into a new draft
Void it, keeping the number
Each button carries its own short name for a screen reader, and the tooltip adds the longer explanation through aria-describedby — the two do different jobs and both are needed.
Below instead
when the control sits near the top of the screen
Narrow the list
Change the order
Find within this page
On a figure
explaining where a number came from
- Retained earnings
- $129,280.15
- Whatever makes the balance sheet balance
- Accumulated depreciation
- −$38,400.00
- Straight line, allocated to the largest asset last
- Tax payable
- $45,829.75
- Collected less reclaimed, this quarter
Inside a scrolling table
the reason it is teleported
| Invoice | Customer | Amount | Note |
|---|---|---|---|
| INV-0241 | Ferrow Manufacturing | $18,240.00 | Part paid — $9,000 received on 14 Sep |
| INV-0239 | Northwind Trading | $11,480.00 | Sent on 09 Sep, viewed twice |
| INV-0236 | Kestrel Logistics | $4,820.00 | 31 days past due, second reminder sent |
The tooltip is rendered on body and positioned against its button, so the table's own scrollbox never clips it.