|
| 1 | +# React Accessible Tooltip |
| 2 | + |
| 3 | +Try out the **interactive demo** [here](https://ryami333.github.io/react-accessible-tooltip/). |
| 4 | + |
| 5 | +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. |
| 6 | + |
| 7 | +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`). |
| 8 | + |
| 9 | + |
| 10 | +## Getting started |
| 11 | + |
| 12 | +### Installation |
| 13 | + |
| 14 | +Install this package and it's co-dependencies: |
| 15 | + |
| 16 | +```bash |
| 17 | +npm install react-accessible-tooltip react react-dom |
| 18 | +``` |
| 19 | + |
| 20 | +### Basic Usage |
| 21 | + |
| 22 | +```js |
| 23 | +import { Tooltip } from 'react-accessible-tooltip'; |
| 24 | +``` |
| 25 | + |
| 26 | +```jsx |
| 27 | +<Tooltip |
| 28 | + label={props => ( |
| 29 | + <span {...props.labelAttributes} className="tooltip-label"> |
| 30 | + {`hover me for info`} |
| 31 | + </span> |
| 32 | + )} |
| 33 | + overlay={props => ( |
| 34 | + <span |
| 35 | + {...props.overlayAttributes} |
| 36 | + className={props.isHidden |
| 37 | + ? 'tooltip-overlay tooltip-overlay--hidden' |
| 38 | + : 'tooltip-overlay'} |
| 39 | + > |
| 40 | + {`this is more info`} |
| 41 | + </span> |
| 42 | + )} |
| 43 | +/> |
| 44 | +``` |
| 45 | + |
| 46 | +### Props |
| 47 | + |
| 48 | +#### label : `function({ isHidden, labelAttributes, requestHide, requestShow, requestToggle }) => React.Node` |
| 49 | +The `label` prop should be passed a render function. The function will be called with these arguments: |
| 50 | + |
| 51 | +Property | Type | Description |
| 52 | +-|-|- |
| 53 | +isHidden | boolean | The current state of the tooltip. |
| 54 | +labelAttributes | object | The various attributes which ought to be assigned to the outer-most element in your render function (eg. `<span {...labelAttributes} />`). |
| 55 | +requestHide | function | Callable which manually sets the state of the tooltip to 'hidden'. |
| 56 | +requestShow | function | Callable which manually sets the state of the tooltip to 'shown'. |
| 57 | +requestToggle | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'. |
| 58 | + |
| 59 | +#### overlay : `function({ isHidden, overlayAttributes, requestHide, requestShow, requestToggle }) => React.Node` |
| 60 | +The `overlay` prop should be passed a render function. The function will be called with these arguments: |
| 61 | + |
| 62 | +Property | Type | Description |
| 63 | +-|-|- |
| 64 | +isHidden | boolean | The current state of the tooltip. |
| 65 | +overlayAttributes | object | The various attributes which ought to be assigned to the outer-most element in your render function (eg. `<span {...overlayAttributes} />`). |
| 66 | +requestHide | function | Callable which manually sets the state of the tooltip to 'hidden'. |
| 67 | +requestShow | function | Callable which manually sets the state of the tooltip to 'shown'. |
| 68 | +requestToggle | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'. |
| 69 | + |
| 70 | +## License |
| 71 | + |
| 72 | +[MIT](LICENSE). |
0 commit comments