react-tooltip 4.2.21 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +35 -17
  2. package/dist/index.es.js +2070 -1398
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +2136 -1461
  5. package/dist/index.js.map +1 -1
  6. package/package.json +75 -73
  7. package/CHANGELOG.md +0 -372
package/README.md CHANGED
@@ -15,16 +15,6 @@
15
15
 
16
16
  Or see it on [Github Page](https://wwayne.github.io/react-tooltip).
17
17
 
18
- ## Maintainers
19
-
20
- [aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
21
-
22
- [roggervalf](https://github.com/roggervalf) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.
23
-
24
- [huumanoid](https://github.com/huumanoid) (inactive)
25
-
26
- We would gladly accept a new maintainer to help out!
27
-
28
18
  ## Installation
29
19
 
30
20
  ```sh
@@ -73,17 +63,18 @@ Notes:
73
63
 
74
64
  | Global | Specific | Type | Values | Description |
75
65
  | :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
76
- | place | data-place | String | top, right, bottom, left | placement |
66
+ | place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order |
77
67
  | type | data-type | String | dark, success, warning, error, info, light | theme |
78
68
  | effect | data-effect | String | float, solid | behaviour of tooltip |
79
69
  | event | data-event | String | e.g. click | custom event to trigger tooltip |
80
70
  | eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |
81
71
  | globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |
82
72
  | isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |
83
- | offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global |
73
+ | offset | data-offset | Object | { top?: number, right?: number, bottom?: number, left?: number } | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global |
74
+ | padding | data-padding | String | e.g. `8px 21px` | Popup padding style |
84
75
  | multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline |
85
76
  | className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |
86
- | 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. |
77
+ | 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.<br/>When using JSX, see [this note](#jsx-note) below. |
87
78
  | delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` |
88
79
  | delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` |
89
80
  | 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 |
@@ -107,6 +98,19 @@ Notes:
107
98
 
108
99
  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](https://www.npmjs.com/package/sanitize-html). 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.
109
100
 
101
+ #### JSX Note
102
+
103
+ You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. You still need to set `data-html={true}`.
104
+ **Example:**
105
+
106
+ ```jsx
107
+ import ReactDOMServer from 'react-dom/server';
108
+ [...]
109
+ <p data-html={true} data-tip={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
110
+ Hover me
111
+ </p>
112
+ ```
113
+
110
114
  #### Note
111
115
 
112
116
  1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
@@ -174,14 +178,14 @@ Same for empty children, if you don't want show the tooltip when the children is
174
178
 
175
179
  ### 3. Tooltip not binding to dynamic content
176
180
 
177
- When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
178
- on new dynamic content, the tooltip will not register its event listener.
181
+ When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes
182
+ on new dynamic content, the tooltip will not register its event listener.
179
183
 
180
184
  For example, you render a generic tooltip in the root of your app, then load a list of content async.
181
185
  Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
182
186
  Since the tooltip has already scanned for data-tip these new elements will not trigger.
183
187
 
184
- One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
188
+ One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
185
189
  to allow event wireup.
186
190
 
187
191
  #### Example
@@ -189,7 +193,7 @@ to allow event wireup.
189
193
  ```jsx
190
194
  <app>
191
195
  <ReactTooltip id="foo" />
192
- <list/>
196
+ <list />
193
197
  </app>
194
198
  ```
195
199
 
@@ -216,6 +220,20 @@ return(
216
220
 
217
221
  [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
218
222
 
223
+ ## Maintainers
224
+
225
+ [danielbarion](https://github.com/danielbarion) Casual maintainer - accepting PRs and doing minor testing/development.
226
+
227
+ [alexgurr](https://github.com/alexgurr) Casual maintainer - accepting PRs and doing minor testing/development.
228
+
229
+ [aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
230
+
231
+ [roggervalf](https://github.com/roggervalf) inactive maintainer - no longer seems to be doing development.
232
+
233
+ [huumanoid](https://github.com/huumanoid) (inactive)
234
+
235
+ We would gladly accept a new maintainer to help out!
236
+
219
237
  ## Contributing
220
238
 
221
239
  We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.