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
I learnt a lot from creating and maintaining react-toolip, but now I start putting my focus on other challenges, so just let me know by sending email to [email protected] if you have interests in maintaining the project :)
12
+
13
+
## Maintainers
14
+
[huumanoid](https://github.com/huumanoid)
15
+
16
+
[aronhelser](https://github.com/aronhelser)
17
+
10
18
## Installation
11
19
12
20
```sh
@@ -23,10 +31,11 @@ import ReactTooltip from 'react-tooltip'
23
31
```
24
32
25
33
2 . Add data-tip = "your placeholder" to your element
34
+
```jsx
35
+
<p data-tip="hello world">Tooltip</p>
36
+
```
26
37
27
-
<p data-tip="hello world">Tooltip</p>
28
-
29
-
3 . Including react-tooltip component
38
+
3 . Include react-tooltip component
30
39
31
40
32
41
```js
@@ -35,13 +44,13 @@ import ReactTooltip from 'react-tooltip'
35
44
36
45
**Standalone**
37
46
38
-
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.
47
+
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
48
40
49
## Options
41
50
Notes:
42
-
* 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
51
+
* 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
43
52
* The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
44
-
* The option you set on specific element, for example: `<a data-type="warning"></a>` will only make effect on this specific tooltip
53
+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture
57
66
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
58
67
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
59
-
class | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
68
+
className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
60
69
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
61
70
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
62
71
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
72
+
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
63
73
border | data-border | Bool | true, false | Add one pixel white border
64
74
getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
65
75
afterShow | null | Func | () => {} | Function that will be called after tooltip show
66
76
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
67
77
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false
68
78
scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
69
79
resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
80
+
wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div
70
81
71
82
## Using react component as tooltip
72
83
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
73
84
74
85
##### Note:
75
-
1.**data-tip** is necessary, because `<ReactTooltip />`find tooltip via this attribute
76
-
2.**data-for**correspond to the **id** of `<ReactTooltip />`
77
-
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
86
+
1.**data-tip** is necessary, because `<ReactTooltip />`finds the tooltip via this attribute
87
+
2.**data-for**corresponds to the **id** of `<ReactTooltip />`
88
+
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
78
89
79
90
## Static Methods
80
-
###ReactTooltip.hide(target)
91
+
###ReactTooltip.hide(target)
81
92
82
-
> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
93
+
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
83
94
84
95
```js
85
96
import {findDOMNode} from'react-dom'
@@ -90,11 +101,11 @@ import ReactTooltip from 'react-tooltip'
90
101
<ReactTooltip />
91
102
```
92
103
93
-
###ReactTooltip.rebuild()
104
+
###ReactTooltip.rebuild()
94
105
95
106
> Rebinding all tooltips
96
107
97
-
###ReactTooltip.show(target)
108
+
###ReactTooltip.show(target)
98
109
99
110
> Show specific tooltip manually, for example:
100
111
@@ -107,35 +118,38 @@ import ReactTooltip from 'react-tooltip'
107
118
<ReactTooltip />
108
119
```
109
120
110
-
## Trouble Shooting
121
+
## Troubleshooting
111
122
### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
112
-
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:
123
+
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:
113
124
114
-
1.Put`<ReactTooltip />`out of the `<Modal>`
115
-
2. Use `React.rebuild()` when opening the modal
116
-
3. If your modal's z-index happens to higher than the tooltip, use the attribute `class` to custom your tooltip's z-index
125
+
1.Place`<ReactTooltip />`outside of the `<Modal>`
126
+
2. Use `ReactTooltip.rebuild()` when opening the modal
127
+
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
117
128
118
-
>I suggest always put`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
129
+
>I suggest always putting`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
119
130
method to control tooltip's behaviour in some situations
120
131
121
132
### 2. Hide tooltip when getContent returns undefined
122
-
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.
133
+
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