Skip to content

Commit 56fd2fd

Browse files
authored
Merge pull request #18 from ryami333/hotfix/readme-location
Hotfix/readme location
2 parents 9dca5da + d831bbb commit 56fd2fd

File tree

2 files changed

+73
-72
lines changed

2 files changed

+73
-72
lines changed

README.md

Lines changed: 0 additions & 72 deletions
This file was deleted.

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
packages/react-accessible-tooltip/README.md
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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

Comments
 (0)