https://github.com/ryami333/react-accessible-tooltip

React Component for rapidly developing Tooltip components, without worrying about accessibility.
https://github.com/ryami333/react-accessible-tooltip

Last synced: 3 months ago
JSON representation

React Component for rapidly developing Tooltip components, without worrying about accessibility.

• Host: GitHub
• URL: https://github.com/ryami333/react-accessible-tooltip
• Owner: ryami333
• Created: 2017-09-09T05:08:19.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-06-18T19:47:31.000Z (6 months ago)
• Last Synced: 2024-08-19T10:12:41.429Z (4 months ago)
• Language: TypeScript
• Homepage: https://ryami333.github.io/react-accessible-tooltip/
• Size: 2.2 MB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Accessible Tooltip · ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) ![NPM release](https://img.shields.io/npm/v/react-accessible-tooltip.svg) ![Code coverage](https://img.shields.io/coveralls/github/ryami333/react-accessible-tooltip.svg)

Try out the **interactive demo**

[here](https://ryami333.github.io/react-accessible-tooltip/).

React Accessible Tooltip is a component which lets you build accessible

tooltips. It handles all the interactivity and accessibility stuff, but keeps

out of the way so you can use whatever markup and styling you want.

Basic usage requires you to pass 'label' and 'overlay' render functions. React

Accessible Tooltip passes you both the state of the tooltip (`isHidden`) and an

object full of properties you should spread across your components

(`labelAttributes`, `overlayAttributes`).

## Getting started

### Installation

Install this package and it's co-dependencies:

```bash

npm install react-accessible-tooltip react react-dom

```

### Basic Usage

```js

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

```

```jsx

 (

    

      {`hover me for info`}

    

  )}

  overlay={(props) => (

    

      {`this is more info`}

    

  )}

/>

```

### Props

#### label : `function({ isHidden, labelAttributes, requestHide, requestShow, requestToggle }) => React.Node`

The `label` prop should be passed a render function. The function will be called

with these arguments:

| Property        | Type     | Description                                                                                                                                |

| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |

| isHidden        | boolean  | The current state of the tooltip.                                                                                                          |

| labelAttributes | object   | The various attributes which ought to be assigned to the outer-most element in your render function (eg. ``). |

| requestHide     | function | Callable which manually sets the state of the tooltip to 'hidden'.                                                                         |

| requestShow     | function | Callable which manually sets the state of the tooltip to 'shown'.                                                                          |

| requestToggle   | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'.                                                      |

#### overlay : `function({ isHidden, overlayAttributes, requestHide, requestShow, requestToggle }) => React.Node`

The `overlay` prop should be passed a render function. The function will be

called with these arguments:

| Property          | Type     | Description                                                                                                                                  |

| ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

| isHidden          | boolean  | The current state of the tooltip.                                                                                                            |

| overlayAttributes | object   | The various attributes which ought to be assigned to the outer-most element in your render function (eg. ``). |

| requestHide       | function | Callable which manually sets the state of the tooltip to 'hidden'.                                                                           |

| requestShow       | function | Callable which manually sets the state of the tooltip to 'shown'.                                                                            |

| requestToggle     | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'.                                                        |

## License

[MIT](LICENSE).