https://github.com/fpapado/react-a11y-tooltip

Accessible React Tooltip component
https://github.com/fpapado/react-a11y-tooltip

a11y accessibility react tooltip

Last synced: 20 days ago
JSON representation

Accessible React Tooltip component

• Host: GitHub
• URL: https://github.com/fpapado/react-a11y-tooltip
• Owner: fpapado
• Created: 2018-07-11T06:58:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-13T07:54:17.000Z (over 6 years ago)
• Last Synced: 2024-04-25T11:21:47.983Z (9 months ago)
• Topics: a11y, accessibility, react, tooltip
• Language: TypeScript
• Homepage:
• Size: 159 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React A11y Tooltip

> Accessible React Tooltip component

## Table of Contents

* [Features](#features)

* [Install](#install)

* [Motivation](#motivation)

* [Usage](#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](https://www.npmjs.com/get-npm).

```shell

$ npm install --save react-a11y-tooltip

# or

$ yarn add react-a11y-tooltip

```

Then import according to your modules model and bundler, such as [Rollup](https://rollupjs.org/guide/en) and [Webpack](https://webpack.js.org/):

```js

// ES Modules

import { Tooltip } from "react-a11y-tooltip";

/// CommonJS modules

const { Tooltip } = require("react-a11y-tooltip");

```

A [UMD](https://github.com/umdjs/umd) version is also available on [unpkg](https://unpkg.com/):

```html

```

## Motivation

:construction: WIP :construction

## Usage

### Quick Start

If you want to just dive in, do this:

```jsx

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 (

    


      


        The team had a great{" "}

        

          GP

        /

        

          GW

        {" "}

        ratio this season.

      

    

  );

}


```