@@ -47,7 +47,7 @@ class Test extends React.Component {
47
47
< h4 className = 'title' > React Tooltip</ h4 >
48
48
< div className = 'demonstration' >
49
49
< a data-for = 'main' data-tip = "Hello<br />multiline<br />tooltip" data-iscapture = "true" >
50
- ◕‿‿◕
50
+ ◕‿‿◕
51
51
</ a >
52
52
</ div >
53
53
< div className = 'control-panel' >
@@ -104,13 +104,13 @@ class Test extends React.Component {
104
104
< pre className = 'example-pre' >
105
105
< div >
106
106
< p > { "<a data-tip data-for='happyFace'> d(`・∀・)b </a>\n" +
107
- "<ReactTooltip id='happyFace' type='error'>\n" +
107
+ "<ReactTooltip id='happyFace' type='error'>\n" +
108
108
" " + " " + "<span>Show happy face</span>\n" +
109
- "</ReactTooltip>\n" +
110
- "<a data-tip data-for='sadFace'> இдஇ </a>\n" +
111
- "<ReactTooltip id='sadFace' type='warning' effect='solid'>\n" +
109
+ "</ReactTooltip>\n" +
110
+ "<a data-tip data-for='sadFace'> இдஇ </a>\n" +
111
+ "<ReactTooltip id='sadFace' type='warning' effect='solid'>\n" +
112
112
" " + " " + "<span>Show sad face</span>\n" +
113
- "</ReactTooltip>" } </ p >
113
+ "</ReactTooltip>" } </ p >
114
114
</ div >
115
115
</ pre >
116
116
< div className = "example-jsx" >
@@ -131,13 +131,13 @@ class Test extends React.Component {
131
131
< p > { "<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
132
132
"<a data-tip data-for='global'> (〃∀〃) </a>\n" +
133
133
"<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
134
- " <p>This is a global react component tooltip</p>\n" +
135
- " <p>You can put every thing here</p>\n" +
136
- " <ul>\n" +
137
- " " + " " + " <li>Word</li>\n" +
138
- " " + " " + " <li>Chart</li>\n" +
139
- " " + " " + " <li>Else</li>\n" +
140
- " </ul>\n" +
134
+ " <p>This is a global react component tooltip</p>\n" +
135
+ " <p>You can put every thing here</p>\n" +
136
+ " <ul>\n" +
137
+ " " + " " + " <li>Word</li>\n" +
138
+ " " + " " + " <li>Chart</li>\n" +
139
+ " " + " " + " <li>Else</li>\n" +
140
+ " </ul>\n" +
141
141
"</ReactTooltip>" } </ p >
142
142
</ div >
143
143
</ pre >
@@ -153,12 +153,12 @@ class Test extends React.Component {
153
153
< ReactTooltip id = 'custom-event' globalEventOff = 'click' />
154
154
</ div >
155
155
< div className = "side" >
156
- < a data-for = 'custom-off-event' ref = 'target' data-tip = 'custom show and hide' data-event = 'click' data-event-off = 'dblclick' > ( •̀д•́)</ a >
157
- < ReactTooltip id = 'custom-off-event' />
156
+ < a data-for = 'custom-off-event' ref = { ref => this . targetRef = ref } data-tip = 'custom show and hide' data-event = 'click' data-event-off = 'dblclick' > ( •̀д•́)</ a >
157
+ < ReactTooltip id = 'custom-off-event' />
158
158
{ /*
159
159
<div>
160
- <button onClick={() => { ReactTooltip.show(ReactDOM.findDOMNode( this.refs.target) ) }}>Show toolip</button>
161
- <button onClick={() => { ReactTooltip.hide(ReactDOM.findDOMNode( this.refs.target) ) }}>Hide toolip</button>
160
+ <button onClick={() => { ReactTooltip.show(this.targetRef ) }}>Show toolip</button>
161
+ <button onClick={() => { ReactTooltip.hide(this.targetRef ) }}>Hide toolip</button>
162
162
</div>
163
163
*/ }
164
164
</ div >
@@ -167,11 +167,11 @@ class Test extends React.Component {
167
167
< pre className = 'example-pre' >
168
168
< div >
169
169
< p > { "<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
170
- "<ReactTooltip globalEventOff='click' />" } </ p >
170
+ "<ReactTooltip globalEventOff='click' />" } </ p >
171
171
</ div >
172
172
< div >
173
173
< p > { "<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
174
- "<ReactTooltip/>" } </ p >
174
+ "<ReactTooltip/>" } </ p >
175
175
</ div >
176
176
</ pre >
177
177
</ div >
@@ -193,30 +193,30 @@ class Test extends React.Component {
193
193
< pre className = 'example-pre' >
194
194
< div >
195
195
< p > { "<a data-tip='hover on me will keep the tooltip'>(・ω´・ )́)</a>\n" +
196
- "<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
197
- ".extraClass {\n" +
196
+ "<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
197
+ ".extraClass {\n" +
198
198
" font-size: 20px !important;\n" +
199
199
" pointer-events: auto !important;\n" +
200
200
" &:hover {\n" +
201
- "visibility: visible !important;\n" +
202
- "opacity: 1 !important;\n" +
201
+ "visibility: visible !important;\n" +
202
+ "opacity: 1 !important;\n" +
203
203
" }\n" +
204
- "}" } </ p >
204
+ "}" } </ p >
205
205
</ div >
206
206
< div >
207
207
< p > { "<a data-tip='custom theme'>(・ω´・ )́)</a>\n" +
208
- "<ReactTooltip className='customeTheme'/>\n" +
209
- " .customeTheme {\n" +
208
+ "<ReactTooltip className='customeTheme'/>\n" +
209
+ " .customeTheme {\n" +
210
210
" color: #ff6e00 !important;\n" +
211
211
" background-color: orange !important;\n" +
212
212
" &.place-top {\n" +
213
- " &:after {\n" +
214
- " border-top-color: orange !important;\n" +
215
- " border-top-style: solid !important;\n" +
216
- " border-top-width: 6px !important;\n" +
217
- " }\n" +
213
+ " &:after {\n" +
214
+ " border-top-color: orange !important;\n" +
215
+ " border-top-style: solid !important;\n" +
216
+ " border-top-width: 6px !important;\n" +
217
+ " }\n" +
218
218
" }\n" +
219
- "}" } </ p >
219
+ "}" } </ p >
220
220
</ div >
221
221
</ pre >
222
222
</ div >
@@ -238,13 +238,13 @@ class Test extends React.Component {
238
238
< pre className = 'example-pre' >
239
239
< div >
240
240
< p > { "<a data-for='getContent' data-tip>=( •̀д•́)</a>\n" +
241
- "<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />" } </ p >
241
+ "<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />" } </ p >
242
242
</ div >
243
243
< div >
244
244
< p > { "<a data-for='overTime' data-tip>=( •̀д•́)</a>\n" +
245
- "<ReactTooltip id='overTime' getContent={[() => {\n" +
246
- " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
247
- "}, 1000]}/>" } </ p >
245
+ "<ReactTooltip id='overTime' getContent={[() => {\n" +
246
+ " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
247
+ "}, 1000]}/>" } </ p >
248
248
</ div >
249
249
</ pre >
250
250
</ div >
@@ -264,8 +264,8 @@ class Test extends React.Component {
264
264
< pre className = 'example-pre' >
265
265
< div >
266
266
< p > { "<a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>\n" +
267
- "<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" +
268
- "<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>" } </ p >
267
+ "<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" +
268
+ "<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>" } </ p >
269
269
</ div >
270
270
</ pre >
271
271
</ div >
@@ -294,22 +294,22 @@ class Test extends React.Component {
294
294
< pre className = 'example-pre' >
295
295
< div >
296
296
< p > { "<div data-for='scrollContent' data-tip data-iscapture='true'\n style={{ width: '5000px', height: '5000px' }}>...</div>\n" +
297
- "<ReactTooltip id='scrollContent' getContent={() => Math.floor(Math.random() * 100)}/>" } </ p >
297
+ "<ReactTooltip id='scrollContent' getContent={() => Math.floor(Math.random() * 100)}/>" } </ p >
298
298
</ div >
299
299
< div >
300
300
< p > { "<div data-for='scrollTime' data-tip data-iscapture='true' data-scroll-hide='false'\n style={{ width: '5000px', height: '5000px' }}>...</div>\n" +
301
- "<ReactTooltip id='scrollTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>" } </ p >
301
+ "<ReactTooltip id='scrollTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>" } </ p >
302
302
</ div >
303
303
</ pre >
304
304
</ div >
305
305
< div className = "section" >
306
306
< h4 className = 'title' > Test SVG</ h4 >
307
307
< p > Note: if you dynamically change elements in the SVG, add:</ p >
308
308
< pre >
309
- { " componentDidUpdate() {\n" +
310
- " ReactTooltip.rebuild()\n" +
311
- " }"
312
- }
309
+ { " componentDidUpdate() {\n" +
310
+ " ReactTooltip.rebuild()\n" +
311
+ " }"
312
+ }
313
313
</ pre >
314
314
< p className = "sub-title" > </ p >
315
315
< div className = "example-jsx" >
@@ -329,79 +329,79 @@ class Test extends React.Component {
329
329
</ div >
330
330
< br />
331
331
< pre className = 'example-pre' >
332
- < div >
333
- < p > { "<svg data-tip='=( •̀д•́)' data-for='svgTooltip' width='50' height='50'>\n" +
334
- " <circle cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='8'/>\n" +
335
- "</svg>\n" +
336
- "<ReactTooltip id='svgTooltip' />" } </ p >
337
- < p > { "<svg width='75' height='50'>\n" +
332
+ < div >
333
+ < p > { "<svg data-tip='=( •̀д•́)' data-for='svgTooltip' width='50' height='50'>\n" +
334
+ " <circle cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='8'/>\n" +
335
+ "</svg>\n" +
336
+ "<ReactTooltip id='svgTooltip' />" } </ p >
337
+ < p > { "<svg width='75' height='50'>\n" +
338
338
"<circle data-tip='=( •̀‿•́)' data-for='svgTooltip2'\n" +
339
339
" cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='4'/>\n" +
340
340
"<circle data-tip='=( ❂‿❂)' data-for='svgTooltip2'\n" +
341
341
" cx='50' cy='25' r='16' fill='#fdf' stroke='#404' strokeWidth='4'/>\n" +
342
- "</svg>\n" +
343
- "<ReactTooltip id='svgTooltip2'/>" } </ p >
344
- </ div >
345
- </ pre >
342
+ "</svg>\n" +
343
+ "<ReactTooltip id='svgTooltip2'/>" } </ p >
344
+ </ div >
345
+ </ pre >
346
346
</ div >
347
- < div className = "section" >
348
- < h4 className = 'title' > Demonstrate using mouse in tooltip. </ h4 >
349
- < p > Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</ p >
350
- < p className = "sub-title" > </ p >
351
- < div className = "example-jsx" >
352
- < div className = "block" >
353
- < a data-for = 'soclose' data-tip = '1' > 1 (❂‿❂)</ a >
354
- </ div >
355
- < div className = "block" >
356
- < a data-for = 'soclose' data-tip = '2' > 2 (❂‿❂)</ a >
357
- </ div >
358
- < div className = "block" >
359
- < a data-for = 'soclose' data-tip = '3' > 3 (❂‿❂)</ a >
360
- </ div >
361
- < div className = "block" >
362
- < a data-for = 'soclose' data-tip = '4' > 4 (❂‿❂)</ a >
363
- </ div >
364
- < div className = "block" >
365
- < a data-for = 'soclose' data-tip = '5' > 5 (❂‿❂)</ a >
366
- </ div >
367
- < div className = "block" >
368
- < a data-for = 'soclose' data-tip = '6' > 6 (❂‿❂)</ a >
369
- </ div >
370
- < div className = "block" >
371
- < a data-for = 'soclose' data-tip = '7' > 7 (❂‿❂)</ a >
372
- </ div >
373
- < div className = "block" >
374
- < a data-for = 'soclose' data-tip = '8' > 8 (❂‿❂)</ a >
375
- </ div >
347
+ < div className = "section" >
348
+ < h4 className = 'title' > Demonstrate using mouse in tooltip. </ h4 >
349
+ < p > Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</ p >
350
+ < p className = "sub-title" > </ p >
351
+ < div className = "example-jsx" >
352
+ < div className = "block" >
353
+ < a data-for = 'soclose' data-tip = '1' > 1 (❂‿❂)</ a >
354
+ </ div >
355
+ < div className = "block" >
356
+ < a data-for = 'soclose' data-tip = '2' > 2 (❂‿❂)</ a >
357
+ </ div >
358
+ < div className = "block" >
359
+ < a data-for = 'soclose' data-tip = '3' > 3 (❂‿❂)</ a >
360
+ </ div >
361
+ < div className = "block" >
362
+ < a data-for = 'soclose' data-tip = '4' > 4 (❂‿❂)</ a >
363
+ </ div >
364
+ < div className = "block" >
365
+ < a data-for = 'soclose' data-tip = '5' > 5 (❂‿❂)</ a >
366
+ </ div >
367
+ < div className = "block" >
368
+ < a data-for = 'soclose' data-tip = '6' > 6 (❂‿❂)</ a >
369
+ </ div >
370
+ < div className = "block" >
371
+ < a data-for = 'soclose' data-tip = '7' > 7 (❂‿❂)</ a >
372
+ </ div >
373
+ < div className = "block" >
374
+ < a data-for = 'soclose' data-tip = '8' > 8 (❂‿❂)</ a >
375
+ </ div >
376
376
377
- < ReactTooltip id = 'soclose'
378
- getContent = { ( dataTip ) => < div > < h3 > This little buddy is { dataTip } </ h3 > < p > Put mouse here</ p > </ div > }
379
- effect = 'solid'
380
- delayHide = { 500 }
381
- delayShow = { 500 }
382
- delayUpdate = { 500 }
383
- place = { 'right' }
384
- border = { true }
385
- type = { 'light' }
377
+ < ReactTooltip id = 'soclose'
378
+ getContent = { ( dataTip ) => < div > < h3 > This little buddy is { dataTip } </ h3 > < p > Put mouse here</ p > </ div > }
379
+ effect = 'solid'
380
+ delayHide = { 500 }
381
+ delayShow = { 500 }
382
+ delayUpdate = { 500 }
383
+ place = { 'right' }
384
+ border = { true }
385
+ type = { 'light' }
386
386
387
- />
388
- </ div >
389
- < br />
390
- < pre className = 'example-pre' >
387
+ />
388
+ </ div >
389
+ < br />
390
+ < pre className = 'example-pre' >
391
391
< div >
392
392
< p > { "<a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>" } </ p >
393
393
< p > { "<a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>..." } </ p >
394
394
< p > { "<a data-for='soclose' data-tip='8'>8 (❂‿❂)</a>" } </ p >
395
395
< p > { "<ReactTooltip id='soclose'\n" +
396
- " getContent={(dataTip) => \n" +
397
- " <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
398
- " effect='solid'\n" +
399
- " delayHide={500}\n" +
400
- " delayShow={500}\n" +
401
- " delayUpdate={500}\n" +
402
- " place={'right'}\n" +
403
- " border={true}\n" +
404
- " type={'light'}" } </ p >
396
+ " getContent={(dataTip) => \n" +
397
+ " <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
398
+ " effect='solid'\n" +
399
+ " delayHide={500}\n" +
400
+ " delayShow={500}\n" +
401
+ " delayUpdate={500}\n" +
402
+ " place={'right'}\n" +
403
+ " border={true}\n" +
404
+ " type={'light'}" } </ p >
405
405
</ div >
406
406
</ pre >
407
407
@@ -425,7 +425,7 @@ class Test extends React.Component {
425
425
"</ReactTooltip>" } </ p >
426
426
</ div >
427
427
</ pre >
428
- </ div >
428
+ </ div >
429
429
430
430
</ section >
431
431
</ div >
0 commit comments