You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ import ReactTooltip from 'react-tooltip'
27
27
<p data-tip="hello world">Tooltip</p>
28
28
```
29
29
30
-
3 . Including react-tooltip component
30
+
3 . Include react-tooltip component
31
31
32
32
33
33
```js
@@ -36,13 +36,13 @@ import ReactTooltip from 'react-tooltip'
36
36
37
37
**Standalone**
38
38
39
-
You can import `node_modules/react-tooltip/standalone/react-tooltip.min.js` into your page, please make sure that you have already imported `react` and `react-dom` into your page.
39
+
You can import `node_modules/react-tooltip/standalone/react-tooltip.min.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
40
40
41
41
## Options
42
42
Notes:
43
-
* The tooltip is using `type: dark``place: top``effect: float` as **default**attribute, you don't have to add these options if you don't want to change default
43
+
* The tooltip sets `type: dark``place: top``effect: float` as **default**attributes. You don't have to add these options if you don't want to change the defaults
44
44
* The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
45
-
* The option you set on specific element, for example: `<a data-type="warning"></a>` will only make effect on this specific tooltip
45
+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
@@ -75,14 +75,14 @@ className | data-class | String | | extra custom class, can use !importan
75
75
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
76
76
77
77
##### Note:
78
-
1.**data-tip** is necessary, because `<ReactTooltip />`find tooltip via this attribute
79
-
2.**data-for**correspond to the **id** of `<ReactTooltip />`
80
-
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
78
+
1.**data-tip** is necessary, because `<ReactTooltip />`finds the tooltip via this attribute
79
+
2.**data-for**corresponds to the **id** of `<ReactTooltip />`
80
+
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
81
81
82
82
## Static Methods
83
-
###ReactTooltip.hide(target)
83
+
###ReactTooltip.hide(target)
84
84
85
-
> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
85
+
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
86
86
87
87
```js
88
88
import {findDOMNode} from'react-dom'
@@ -93,11 +93,11 @@ import ReactTooltip from 'react-tooltip'
93
93
<ReactTooltip />
94
94
```
95
95
96
-
###ReactTooltip.rebuild()
96
+
###ReactTooltip.rebuild()
97
97
98
98
> Rebinding all tooltips
99
99
100
-
###ReactTooltip.show(target)
100
+
###ReactTooltip.show(target)
101
101
102
102
> Show specific tooltip manually, for example:
103
103
@@ -110,19 +110,19 @@ import ReactTooltip from 'react-tooltip'
110
110
<ReactTooltip />
111
111
```
112
112
113
-
## Trouble Shooting
113
+
## Troubleshooting
114
114
### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
115
-
The component was designed to set a `<Reactooltip />`one place then use tooltip everywhere, but a lot of people stuck in using this component with modal, you can check the discussion [here](https://github.com/wwayne/react-tooltip/issues/130), the summarization of solving the problem is as following:
115
+
The component was designed to set `<ReactTooltip />`once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:
116
116
117
-
1.Put`<ReactTooltip />`out of the `<Modal>`
117
+
1.Place`<ReactTooltip />`outside of the `<Modal>`
118
118
2. Use `ReactTooltip.rebuild()` when opening the modal
119
-
3. If your modal's z-index happens to higher than the tooltip, use the attribute `className` to custom your tooltip's z-index
119
+
3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index
120
120
121
-
>I suggest always put`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
121
+
>I suggest always putting`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
122
122
method to control tooltip's behaviour in some situations
123
123
124
124
### 2. Hide tooltip when getContent returns undefined
125
-
When you set `getContent={() => { return }}` you will find the tooltip will dispaly`true`, that's because React will set the value of data-* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situaction.
125
+
When you set `getContent={() => { return }}` you will find the tooltip will display`true`. That's because React will set the value of data-* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.
0 commit comments