react-a11y-tooltip
v0.4.0 react a11y accessibility tooltip aria
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
import { Tooltip } from "react-a11y-tooltip";
/// CommonJS modules
const { Tooltip } = require("react-a11y-tooltip");
A UMD version is also available on unpkg:
<script src="https://unpkg.com/react-a11y-tooltip/dist/react-a11y-tooltip.umd.js"></script>
Motivation
:construction: 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";
function App() {
return (
<div className="App">
<p>
The team had a great{" "}
<Tooltip purpose="descriptive" renderTooltip="Games Played">
GP
</Tooltip>/
<Tooltip purpose="descriptive" renderTooltip="Games Won">
GW
</Tooltip>{" "}
ratio this season.
</p>
</div>
);
}
npm i react-a11y-tooltip
Metadata
- MIT
- Whatever
- Fotis Papadogeorgopoulos
- released 7/12/2018