Skip to content

Commit 8b85e81

Browse files
committed
Update readme
1 parent 810e788 commit 8b85e81

File tree

1 file changed

+20
-19
lines changed

1 file changed

+20
-19
lines changed

README.md

+20-19
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
[![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
33
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
44
[![npm download][download-image]][download-url]
5-
[![Circle CI](https://circleci.com/gh/wwayne/react-tooltip/tree/master.svg?style=svg)](https://circleci.com/gh/wwayne/react-tooltip/tree/master)
5+
[![Build Status](https://travis-ci.org/wwayne/react-tooltip.svg?branch=master)](https://travis-ci.org/wwayne/react-tooltip)
66

77
[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
88
[download-url]: https://npmjs.org/package/react-tooltip
@@ -45,21 +45,22 @@ Notes:
4545

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

48-
Global | Specific | Type | Values | Description
49-
:-----------|:-------------|:----------|:----------|:------------------
50-
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
51+
type | data-type | String | success, warning, error, info, light | theme
52+
effect| data-effect | String | float, solid | behaviour of tooltip
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+
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
6364

6465
### Using react component as tooltip
6566
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)
6970
2. **data-for** correspond to the **id** of `<ReactTooltip />`
7071
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
7172

72-
### Methods
73-
`ReactTooltip.hide()` for hide the tooltip manually
73+
### Static Methods
74+
`ReactTooltip.hide()`: Hide the tooltip manually
7475

75-
`ReactTooltip.rebuild()` for re-bind tooltip to the corresponding element
76+
`ReactTooltip.rebuild()`: Rebinding tooltip to the corresponding elements
7677

7778
I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
7879
method to control tooltip's behaviour in some situations

0 commit comments

Comments
 (0)