Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProHelp text that opens on click or tap and is announced through a live region, for the small "i" button where a hover tooltip would be unreachable on touch.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for short, plain help that people on phones also need: what a field means, why a limit exists. The text is read out when it opens, which a hover tooltip does not do on touch.
Do not put links, buttons or forms in it; use a popover for that. Do not use it for labels: a toggletip supplements a label, it does not replace one.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Accessible name of the button. |
children | ReactNode | - | The help text. |
trigger | ReactNode | i | Button content. |
side | "top" | "bottom" | top | Where the text appears. |
align | "start" | "end" | start | Which edge of the button it lines up with. |
role="status" region when opened, so screen readers read it once without moving focus.aria-expanded and an accessible name from label.prefers-reduced-motion.| Key | Action |
|---|---|
| Enter or Space | toggles the text |
| Escape | closes and keeps focus on the button |
| Tab | moving away closes it |
The component ships a Testing Library test (toggletip.test.tsx) that covers opening keeping focus, toggling, Escape, outside press and blur.