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.
Installation
Via NPM or Yarn:
npm install the-only-react-tooltipyarn add the-only-react-tooltipUsage
Using NPM
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:
Props
| Name | Type | Required? | Default | Notes |
|---|---|---|---|---|
children |
JSX.Element or string |
Yes | - | The hover target to display the tooltip is added to children, and the DOMRect of children is used to correctly position the tooltip. |
body |
ReactNode |
Yes | - | Contents of the tooltip. It's suggested to use a plain string, but arbitrary ReactNode's are allowed to permit for styled strings and component library string components. |
position |
"top" | "bottom" | "left" | "right" |
No | - | Override the default positioning algorithm and always show the tooltip on one side. |
title |
string |
No | - | For accessibility - if the tooltip can't be shown, this will be added to children as the title attribute and shown instead. |
ariaEssential |
boolean |
No | false |
Sets the ARIA importance of the tooltip. true -> aria-labelledBy (implies essential information), false -> aria-describedBy (implies additional information). If you're setting this to true, rethink your use of a tooltip! |
tooltipId |
string |
No | 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 aria-describedBy and aria-labelledBy. Make sure you set this to a unique value if you're using more that one tooltip on your page. |
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 devLicense
MIT - see license.md for full details.