Skip to content

Commit fc14093

Browse files
committed
docs: update readme.md with installation and use steps
1 parent fc4ec8a commit fc14093

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,62 @@ Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-sta
4848
</a>
4949
</p>
5050

51+
---
52+
53+
## Installation
54+
55+
```sh
56+
npm install react-tooltip
57+
```
58+
59+
or
60+
61+
```sh
62+
yarn add react-tooltip
63+
```
64+
65+
## Usage
66+
67+
1 . Import the CSS file to set default styling.
68+
69+
> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
70+
71+
```js
72+
import 'react-tooltip/dist/react-tooltip.css'
73+
```
74+
75+
This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file.
76+
77+
2 . Import `react-tooltip` after installation.
78+
79+
```js
80+
import { Tooltip } from 'react-tooltip'
81+
```
82+
83+
or if you want to still use the name ReactTooltip as V4:
84+
85+
```js
86+
import { Tooltip as ReactTooltip } from 'react-tooltip'
87+
```
88+
89+
3 . Add `data-tooltip-id="<tooltip id>"` and `data-tooltip-content="<your placeholder>"` to your element.
90+
91+
> `data-tooltip-id` is the equivalent of V4's `data-for`.
92+
93+
```jsx
94+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
95+
◕‿‿◕
96+
</a>
97+
```
98+
99+
4 . Include the `<Tooltip />` element.
100+
101+
> Don't forget to set the id, it won't work without it!
102+
103+
```jsx
104+
<Tooltip id="my-tooltip" />
105+
```
106+
51107
## Troubleshooting
52108

53109
Before trying these, make sure you're running the latest ReactTooltip version with

0 commit comments

Comments
 (0)