Tooltip
A few words about the thing under the pointer.
Default
Three buttons under one provider, sharing its delay.
For naming an icon button or spelling out an abbreviation — never for something the reader needs. It appears after a delay, and once one has appeared the next ones come at once, so moving along a toolbar does not stutter.
Installation
npx philcn@latest add tooltipThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| TooltipProvider.delayDuration | number | How long the first tooltip waits. |
| TooltipProvider.skipDelayDuration | number | How long the group stays warm, so the next tooltip appears at once. |
| Tooltip.delayDuration | number | Overrides the provider's delay for this one. |
| Tooltip.disableHoverableContent | boolean | Closes as soon as the pointer leaves the trigger, instead of letting it travel to the tooltip. |
| TooltipContent.side | Side | Which side of the trigger it prefers. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- A tooltip cannot be reached by touch. Anything that matters belongs on the page, not in one.
- It is tied to its trigger for screen readers, so a button with a tooltip and no text is still named.