Modern and minimal tooltip for React, written with accessibility in mind.
Why does every React tooltip package have to be so bloated and complex? Use
the-only-react-tooltip when you:
- Just want a tooltip that acts like a tooltip
- Care about accessibility
- Don't want the extra bloat
Includes definitions for TypeScript.
Notes on accessibility
Tooltips shouldn't break accessibility, but they often do. This package does it's best to be as accessible as possible:
- Tooltip appears on hover, on focus events (such as tab), and on touch events.
- Tooltip can be dismissed by pressing escape, or by touching anywhere on the page.
- Uses the HTML native title attribute when the tooltip can't be displayed (see props below).
- Uses all relevant ARIA attributes (see props below).
The developer should still be responsible! Try not to display anything more than basic text, and don't display tooltips on UI elements that can be interacted with in some other way, like a non-disabled button (mobile users won't have time to read the tooltip before the button action is executed).
See how this component adheres to the ARIA design pattern for tooltips.
Via NPM or Yarn:
npm install the-only-react-tooltipyarn add the-only-react-tooltip
1 . Import
the-only-react-tooltip after installation
2 . Wrap your DOM node or React component with
Tooltip (They will be used as the hover target):
<Tooltip =><YourReactComponent ... /></Tooltip>
2 . The component may be extended by importing its props and state:
||Yes||-||The hover target to display the tooltip is added to
||Yes||-||Contents of the tooltip. It's suggested to use a plain string, but arbitrary
||No||-||Override the default positioning algorithm and always show the tooltip on one side.|
||No||-||For accessibility - if the tooltip can't be shown, this will be added to
||Sets the ARIA importance of the tooltip.
||Sets the ID of the tooltip that will be used as the id of the base HTML element, as well as the value of
Example / Local development
This package ships with a basic example served with
webpack-dev-server. This can be used to test changes during development:
npm run dev
MIT - see
license.md for full details.