React A11y Tooltip
Accessible React Tooltip component
Table of Contents
Features
- Full presentational control for the caller (render props).
- Easy to understand source code. You should be able to fork and do your thing if desired.
- Ample documentation to help you understand the problem, in addition to the solutions.
What it does not do by itself:
- Style the tooltip. That is up to you :)
Install
This package is distributed via npm.
$ npm install --save react-a11y-tooltip# or $ yarn add react-a11y-tooltip
Then import according to your modules model and bundler, such as Rollup and Webpack:
// ES Modules; /// CommonJS modulesconst Tooltip = ;
A UMD version is also available on unpkg:
Motivation
🚧 WIP :construction
Usage
Quick Start
If you want to just dive in, do this:
import Tooltip from "react-a11y-tooltip"; // NOTE: Styles are important for this to work.// You can also copy or overwrite them.import "react-a11y-tooltip/dist/react-a11y-tooltip.css"; { return <div ="App"> <p> The team had a great" " <Tooltip ="descriptive" ="Games Played"> GP </Tooltip>/ <Tooltip ="descriptive" ="Games Won"> GW </Tooltip>" " ratio this season </p> </div> ;}