Skip to content

Commit d07f75b

Browse files
author
Diana Holland
committed
Fix typos and improve for clarity
1 parent 8a20794 commit d07f75b

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

README.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import ReactTooltip from 'react-tooltip'
2727
<p data-tip="hello world">Tooltip</p>
2828
```
2929

30-
3 . Including react-tooltip component
30+
3 . Include react-tooltip component
3131

3232

3333
```js
@@ -36,13 +36,13 @@ import ReactTooltip from 'react-tooltip'
3636

3737
**Standalone**
3838

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.
4040

4141
## Options
4242
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
4444
* 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
4646

4747
Check example: [React-tooltip Test](http://wwayne.com/react-tooltip)
4848

@@ -75,14 +75,14 @@ className | data-class | String | | extra custom class, can use !importan
7575
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
7676

7777
##### 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
8181

8282
## Static Methods
83-
###ReactTooltip.hide(target)
83+
### ReactTooltip.hide(target)
8484

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
8686
8787
```js
8888
import {findDOMNode} from 'react-dom'
@@ -93,11 +93,11 @@ import ReactTooltip from 'react-tooltip'
9393
<ReactTooltip />
9494
```
9595

96-
###ReactTooltip.rebuild()
96+
### ReactTooltip.rebuild()
9797

9898
> Rebinding all tooltips
9999
100-
###ReactTooltip.show(target)
100+
### ReactTooltip.show(target)
101101

102102
> Show specific tooltip manually, for example:
103103
@@ -110,19 +110,19 @@ import ReactTooltip from 'react-tooltip'
110110
<ReactTooltip />
111111
```
112112

113-
## Trouble Shooting
113+
## Troubleshooting
114114
### 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:
116116

117-
1. Put `<ReactTooltip />` out of the `<Modal>`
117+
1. Place `<ReactTooltip />` outside of the `<Modal>`
118118
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
120120

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
122122
method to control tooltip's behaviour in some situations
123123

124124
### 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.
126126

127127
```jsx
128128
<p data-tip='' data-for='test'></p>

0 commit comments

Comments
 (0)