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
place | data-place | String | top, right, bottom, left | tooltip's placement
51
-
type | data-type | String | success, warning, error, info, light | tooltip's color theme
52
-
effect | data-effect | String | float, solid | either float or pinned
53
-
event | data-event | String | e.g. click | custom event to trigger tooltip
54
-
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip
55
-
isCapture | data-iscapture | Bool | true, false | when set to ture, custom event's propagation mode will be capture, default is false, `<p data-tip="tooltip" data-event='click' data-iscapture='true'></p>` or `<ReactTooltip isCapture={true} />` |
56
-
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
57
-
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
58
-
class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class
59
-
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
60
-
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
61
-
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
62
-
border | data-border | Bool | true, false | Add one pixel white border
48
+
Global|Specific |Type |Values | Description
49
+
|:---|:---|:---|:---|:----
50
+
place | data-place | String | top, right, bottom, left | placement
event | data-event | String | e.g. click | custom event to trigger tooltip
54
+
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip
55
+
globalEventOff | | 'string'| e.g. click| global event to hide tooltip (global only)
56
+
isCapture | data-iscapture | Bool | true, false | when set to ture, custom event's propagation mode will be capture
57
+
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
+
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
60
+
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
61
+
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
62
+
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
63
+
border | data-border | Bool | true, false | Add one pixel white border
63
64
64
65
### Using react component as tooltip
65
66
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
@@ -69,10 +70,10 @@ Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
69
70
2.**data-for** correspond to the **id** of `<ReactTooltip />`
70
71
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
71
72
72
-
### Methods
73
-
`ReactTooltip.hide()` for hide the tooltip manually
73
+
### Static Methods
74
+
`ReactTooltip.hide()`: Hide the tooltip manually
74
75
75
-
`ReactTooltip.rebuild()` for re-bind tooltip to the corresponding element
76
+
`ReactTooltip.rebuild()`: Rebinding tooltip to the corresponding elements
76
77
77
78
I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
78
79
method to control tooltip's behaviour in some situations
0 commit comments