React A11y Tooltip

Accessible React Tooltip component

Table of Contents

• Features
• Install
• Motivation
• Usage

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

🚧 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>
  );
}