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
@@ -27,7 +30,7 @@ import ReactTooltip from 'react-tooltip'
27
30
<p data-tip="hello world">Tooltip</p>
28
31
```
29
32
30
-
3 . Including react-tooltip component
33
+
3 . Include react-tooltip component
31
34
32
35
33
36
```js
@@ -36,13 +39,13 @@ import ReactTooltip from 'react-tooltip'
36
39
37
40
**Standalone**
38
41
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.
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.
40
43
41
44
## Options
42
45
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
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
44
47
* 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
48
+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
@@ -75,14 +78,14 @@ className | data-class | String | | extra custom class, can use !importan
75
78
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
76
79
77
80
##### 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**
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
81
84
82
85
## Static Methods
83
-
###ReactTooltip.hide(target)
86
+
###ReactTooltip.hide(target)
84
87
85
-
> 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
86
89
87
90
```js
88
91
import {findDOMNode} from'react-dom'
@@ -93,11 +96,11 @@ import ReactTooltip from 'react-tooltip'
93
96
<ReactTooltip />
94
97
```
95
98
96
-
###ReactTooltip.rebuild()
99
+
###ReactTooltip.rebuild()
97
100
98
101
> Rebinding all tooltips
99
102
100
-
###ReactTooltip.show(target)
103
+
###ReactTooltip.show(target)
101
104
102
105
> Show specific tooltip manually, for example:
103
106
@@ -110,19 +113,19 @@ import ReactTooltip from 'react-tooltip'
110
113
<ReactTooltip />
111
114
```
112
115
113
-
## Trouble Shooting
116
+
## Troubleshooting
114
117
### 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:
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:
116
119
117
-
1.Put`<ReactTooltip />`out of the `<Modal>`
120
+
1.Place`<ReactTooltip />`outside of the `<Modal>`
118
121
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
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
120
123
121
-
>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
122
125
method to control tooltip's behaviour in some situations
123
126
124
127
### 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.
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.
126
129
127
130
```jsx
128
131
<p data-tip='' data-for='test'></p>
@@ -139,6 +142,9 @@ Same for empty children, if you don't want show the tooltip when the children is
139
142
## Article
140
143
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
141
144
145
+
## Authors
146
+
see [AUTHORS](https://github.com/wwayne/react-tooltip/blob/master/AUTHORS.txt)
0 commit comments