Skip to content

Commit 1183fdb

Browse files
author
Jason Finch
committed
docs(readme): add tip on rebuild for dynamic content
fix markdown lint violations.
1 parent fc05a29 commit 1183fdb

File tree

1 file changed

+46
-6
lines changed

1 file changed

+46
-6
lines changed

README.md

+46-6
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ yarn add react-tooltip
3939

4040
## Usage
4141

42-
**Using NPM**
42+
### Using NPM
4343

4444
1 . Require react-tooltip after installation
4545

@@ -55,11 +55,11 @@ import ReactTooltip from 'react-tooltip';
5555

5656
3 . Include react-tooltip component
5757

58-
```js
58+
```jsx
5959
<ReactTooltip />
6060
```
6161

62-
**Standalone**
62+
### Standalone
6363

6464
You can import `node_modules/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
6565

@@ -107,7 +107,7 @@ Notes:
107107

108108
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.
109109

110-
##### Note:
110+
#### Note
111111

112112
1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
113113
2. **data-for** corresponds to the **id** of `<ReactTooltip />`
@@ -119,7 +119,7 @@ The `html` option allows a tooltip to directly display raw HTML. This is a secur
119119

120120
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
121121
122-
```js
122+
```jsx
123123
import ReactTooltip from 'react-tooltip'
124124

125125
<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -135,7 +135,7 @@ import ReactTooltip from 'react-tooltip'
135135

136136
> Show specific tooltip manually, for example:
137137
138-
```js
138+
```jsx
139139
import ReactTooltip from 'react-tooltip'
140140

141141
<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -172,6 +172,46 @@ Same for empty children, if you don't want show the tooltip when the children is
172172
<ReactTooltip id='test'>{}</ReactTooltip>
173173
```
174174

175+
### 3. Tooltip not binding to dynamic content
176+
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.
179+
180+
For example, you render a generic tooltip in the root of your app, then load a list of content async.
181+
Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
182+
Since the tooltip has already scanned for data-tip these new elements will not trigger.
183+
184+
One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again,
185+
to allow event wireup.
186+
187+
#### Example
188+
189+
```jsx
190+
<app>
191+
<ReactTooltip id="foo" />
192+
<list/>
193+
</app>
194+
```
195+
196+
```jsx
197+
198+
const dynamicList = (props) => {
199+
200+
useEffect(() => {
201+
ReactTooltip.rebuild();
202+
});
203+
204+
return(
205+
<list>
206+
{data.map((item)=> {
207+
<span data-for="foo">My late bound tooltip triggered data</span>
208+
});}
209+
</list>
210+
);
211+
};
212+
213+
```
214+
175215
## Article
176216

177217
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

0 commit comments

Comments
 (0)