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
[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
We would gladly accept a new maintainer to help out!
17
+
10
18
## Installation
11
19
12
20
```sh
@@ -27,7 +35,7 @@ import ReactTooltip from 'react-tooltip'
27
35
<p data-tip="hello world">Tooltip</p>
28
36
```
29
37
30
-
3 . Including react-tooltip component
38
+
3 . Include react-tooltip component
31
39
32
40
33
41
```js
@@ -36,15 +44,15 @@ import ReactTooltip from 'react-tooltip'
36
44
37
45
**Standalone**
38
46
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.
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.
40
48
41
49
## Options
42
50
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
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
44
52
* 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
53
+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
59
67
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
60
68
className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
61
-
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
69
+
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.
62
70
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
63
71
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
72
+
delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target
64
73
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
65
74
border | data-border | Bool | true, false | Add one pixel white border
66
-
getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
67
-
afterShow | null | Func | () => {} | Function that will be called after tooltip show
68
-
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
75
+
getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
76
+
afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show
77
+
afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide
78
+
overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one
69
79
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false
70
80
scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
71
81
resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
72
82
wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div
83
+
clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false
84
+
85
+
### Security Note
86
+
87
+
The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html-react](https://www.npmjs.com/package/sanitize-html-react). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
73
88
74
89
## Using react component as tooltip
75
-
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
90
+
Check the example [React-tooltip Test](https://react-tooltip.netlify.com/)
76
91
77
92
##### 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**
93
+
1.**data-tip** is necessary, because `<ReactTooltip />`finds the tooltip via this attribute
94
+
2.**data-for**corresponds to the **id** of `<ReactTooltip />`
95
+
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
81
96
82
97
## Static Methods
83
-
###ReactTooltip.hide(target)
98
+
###ReactTooltip.hide(target)
84
99
85
-
> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
100
+
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
### 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:
128
+
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
129
117
-
1.Put`<ReactTooltip />`out of the `<Modal>`
130
+
1.Place`<ReactTooltip />`outside of the `<Modal>`
118
131
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
132
+
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
133
121
-
>I suggest always put`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
134
+
>I suggest always putting`<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
122
135
method to control tooltip's behaviour in some situations
123
136
124
137
### 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.
138
+
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
139
127
140
```jsx
128
141
<p data-tip='' data-for='test'></p>
@@ -139,6 +152,10 @@ Same for empty children, if you don't want show the tooltip when the children is
139
152
## Article
140
153
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
141
154
142
-
### License
155
+
## Contributing
156
+
157
+
We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.
We are using semantic-release to automate the release process, and this depends on a specific format for commit messages. Please run `npm run commit` to use `commitizen` to properly format your commit messages so they can be automatically processed and included in release notes.
8
+
9
+
## Pull request testing
10
+
11
+
Some notes on testing and releasing.
12
+
* For a PR, follow Github's command-line instructions for retrieving the branch with the changes.
13
+
*`make dev` starts a development server, open `http://localhost:8888` to see the example website.
14
+
* Provide feedback on the PR about your results.
15
+
16
+
## Doing a release
17
+
18
+
We are using semantic-release instead of this:
19
+
20
+
*`make deploy` updates the files in the `standalone` directory
21
+
* update the version number in `package.json`
22
+
- Fixes update the patch number, features update the minor number.
23
+
- Major version update is reserved for API breaking changes, not just additions.
24
+
*`npm run github-changes -- -n 3.X.Y` to update the changelog
25
+
*`git add`, `git commit` and `git push` to get the version to master.
26
+
*`git tag -a 3.X.Y -m 3.X.Y``git push --tags`
27
+
*`npm publish`
28
+
* add a version on the github release page, based on the tag
0 commit comments