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
@@ -30,7 +30,7 @@ import ReactTooltip from 'react-tooltip'
30
30
<p data-tip="hello world">Tooltip</p>
31
31
```
32
32
33
-
3 . Including react-tooltip component
33
+
3 . Include react-tooltip component
34
34
35
35
36
36
```js
@@ -39,13 +39,13 @@ import ReactTooltip from 'react-tooltip'
39
39
40
40
**Standalone**
41
41
42
-
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.
42
+
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.
43
43
44
44
## Options
45
45
Notes:
46
-
* 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
46
+
* 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
47
47
* The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
48
-
* The option you set on specific element, for example: `<a data-type="warning"></a>` will only make effect on this specific tooltip
48
+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
@@ -78,14 +78,14 @@ className | data-class | String | | extra custom class, can use !importan
78
78
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
79
79
80
80
##### Note:
81
-
1.**data-tip** is necessary, because `<ReactTooltip />`find tooltip via this attribute
82
-
2.**data-for**correspond to the **id** of `<ReactTooltip />`
83
-
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
81
+
1.**data-tip** is necessary, because `<ReactTooltip />`finds the tooltip via this attribute
82
+
2.**data-for**corresponds to the **id** of `<ReactTooltip />`
83
+
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
84
84
85
85
## Static Methods
86
-
###ReactTooltip.hide(target)
86
+
###ReactTooltip.hide(target)
87
87
88
-
> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
88
+
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
89
89
90
90
```js
91
91
import {findDOMNode} from'react-dom'
@@ -96,11 +96,11 @@ import ReactTooltip from 'react-tooltip'
96
96
<ReactTooltip />
97
97
```
98
98
99
-
###ReactTooltip.rebuild()
99
+
###ReactTooltip.rebuild()
100
100
101
101
> Rebinding all tooltips
102
102
103
-
###ReactTooltip.show(target)
103
+
###ReactTooltip.show(target)
104
104
105
105
> Show specific tooltip manually, for example:
106
106
@@ -113,19 +113,19 @@ import ReactTooltip from 'react-tooltip'
113
113
<ReactTooltip />
114
114
```
115
115
116
-
## Trouble Shooting
116
+
## Troubleshooting
117
117
### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
118
-
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:
118
+
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:
119
119
120
-
1.Put`<ReactTooltip />`out of the `<Modal>`
120
+
1.Place`<ReactTooltip />`outside of the `<Modal>`
121
121
2. Use `ReactTooltip.rebuild()` when opening the modal
122
-
3. If your modal's z-index happens to higher than the tooltip, use the attribute `className` to custom your tooltip's z-index
122
+
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
123
123
124
-
>I suggest always put`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
124
+
>I suggest always putting`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
125
125
method to control tooltip's behaviour in some situations
126
126
127
127
### 2. Hide tooltip when getContent returns undefined
128
-
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.
128
+
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