Skip to content

Commit edf3645

Browse files
wwaynewwayne
committed
I miss my examples
1 parent 4a391db commit edf3645

File tree

1 file changed

+201
-19
lines changed

1 file changed

+201
-19
lines changed

‎example/src/index.js

Lines changed: 201 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict'
22

33
import React from 'react'
4-
import {render, findDOMNode} from 'react-dom'
4+
import {render} from 'react-dom'
55
import ReactTooltip from '../../src'
66

77
const Test = React.createClass({
@@ -11,8 +11,7 @@ const Test = React.createClass({
1111
place: 'top',
1212
type: 'dark',
1313
effect: 'float',
14-
condition: false,
15-
disable: true
14+
condition: false
1615
}
1716
},
1817

@@ -40,27 +39,210 @@ const Test = React.createClass({
4039
})
4140
},
4241

43-
showError () {
44-
this.setState({
45-
disable: false
46-
}, () => {
47-
ReactTooltip.show(findDOMNode(this.refs.btn))
48-
})
49-
},
50-
51-
giveError () {
52-
return 'error'
53-
},
54-
5542
render () {
56-
let { place, type, effect, disable } = this.state
43+
let { place, type, effect } = this.state
5744
return (
5845
<div>
59-
<button ref='btn' data-tip onClick={this.showError} data-tip-disable={disable}>CLick</button>
60-
<ReactTooltip getContent={this.giveError} place='bottom' delayHide={1000} />
46+
<section className='tooltip-example'>
47+
<h4 className='title'>React Tooltip</h4>
48+
<div className='demonstration'>
49+
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip">
50+
◕‿‿◕
51+
</a>
52+
</div>
53+
<div className='control-panel'>
54+
<div className='button-group'>
55+
<div className='item'>
56+
<p>Place</p>
57+
<a className={place === 'top' ? 'active' : ''} onClick={this.changePlace.bind(this, 'top')}>Top<span className='mark'>(default)</span></a>
58+
<a className={place === 'right' ? 'active' : ''} onClick={this.changePlace.bind(this, 'right')}>Right</a>
59+
<a className={place === 'bottom' ? 'active' : ''} onClick={this.changePlace.bind(this, 'bottom')}>Bottom</a>
60+
<a className={place === 'left' ? 'active' : ''} onClick={this.changePlace.bind(this, 'left')}>Left</a>
61+
</div>
62+
<div className='item'>
63+
<p>Type</p>
64+
<a className={type === 'dark' ? 'active' : ''} onClick={this.changeType.bind(this, 'dark')}>Dark<span className='mark'>(default)</span></a>
65+
<a className={type === 'success' ? 'active' : ''} onClick={this.changeType.bind(this, 'success')}>Success</a>
66+
<a className={type === 'warning' ? 'active' : ''} onClick={this.changeType.bind(this, 'warning')}>Warning</a>
67+
<a className={type === 'error' ? 'active' : ''} onClick={this.changeType.bind(this, 'error')}>Error</a>
68+
<a className={type === 'info' ? 'active' : ''} onClick={this.changeType.bind(this, 'info')}>Info</a>
69+
<a className={type === 'light' ? 'active' : ''} onClick={this.changeType.bind(this, 'light')}>Light</a>
70+
</div>
71+
<div className='item'>
72+
<p>Effect</p>
73+
<a className={effect === 'float' ? 'active' : ''} onClick={this.changeEffect.bind(this, 'float')}>Float<span className='mark'>(default)</span></a>
74+
<a className={effect === 'solid' ? 'active' : ''} onClick={this.changeEffect.bind(this, 'solid')}>Solid</a>
75+
</div>
76+
</div>
77+
<pre>
78+
<div>
79+
<p className='label'>Code</p>
80+
<hr></hr>
81+
<p>{'<a data-tip="React-tooltip"> ◕‿‿◕ </a>'}</p>
82+
<p>{'<ReactTooltip place="' + place + '" type="' + type + '" effect="' + effect + '"/>'}</p>
83+
</div>
84+
</pre>
85+
</div>
86+
<ReactTooltip id='main' place={place} type={type} effect={effect} multiline={true}/>
87+
</section>
88+
<section className="advance">
89+
<div className="section">
90+
<h4 className='title'>Advance features</h4>
91+
<p className="sub-title">Use everything as tooltip</p>
92+
93+
<div className="example-jsx">
94+
<div className="side" style={{ transform: 'translate3d(5px, 5px, 5px)' }}>
95+
<a data-tip data-for='happyFace'> d(`･∀･)b </a>
96+
<ReactTooltip id='happyFace' type="error"><span>Show happy face</span></ReactTooltip>
97+
</div>
98+
<div className="side">
99+
<a data-tip data-for='sadFace'> இдஇ </a>
100+
<ReactTooltip id='sadFace' type="warning" effect="solid"><span>Show sad face</span></ReactTooltip>
101+
</div>
102+
</div>
103+
<br />
104+
<pre className='example-pre'>
105+
<div>
106+
<p>{"<a data-tip data-for='happyFace'> d(`･∀･)b </a>\n" +
107+
"<ReactTooltip id='happyFace' type='error'>\n" +
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" +
112+
" " + " " + "<span>Show sad face</span>\n" +
113+
"</ReactTooltip>"}</p>
114+
</div>
115+
</pre>
116+
<div className="example-jsx">
117+
<div className="side"><a data-tip data-for='global'> σ`∀´)σ </a></div>
118+
<div className="side"><a data-tip data-for='global'> (〃∀〃) </a></div>
119+
<ReactTooltip id='global' aria-haspopup="true" role="example">
120+
<p>This is a global react component tooltip</p>
121+
<p>You can put every thing here</p>
122+
<ul>
123+
<li>Word</li>
124+
<li>Chart</li>
125+
<li>Else</li>
126+
</ul>
127+
</ReactTooltip>
128+
</div>
129+
<pre className='example-pre'>
130+
<div>
131+
<p>{"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
132+
"<a data-tip data-for='global'> (〃∀〃) </a>\n" +
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" +
141+
"</ReactTooltip>"}</p>
142+
</div>
143+
</pre>
144+
</div>
145+
</section>
146+
<section className="advance">
147+
<div className="section">
148+
<h4 className='title'>Custom event</h4>
149+
<p className="sub-title"></p>
150+
<div className="example-jsx">
151+
<div className="side">
152+
<a data-for='custom-event' data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
153+
<ReactTooltip id='custom-event' globalEventOff='click'/>
154+
</div>
155+
<div className="side">
156+
<a data-for='custom-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
157+
<ReactTooltip id='custom-off-event'/>
158+
</div>
159+
</div>
160+
<br />
161+
<pre className='example-pre'>
162+
<div>
163+
<p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
164+
"<ReactTooltip globalEventOff='click' />"}</p>
165+
</div>
166+
<div>
167+
<p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
168+
"<ReactTooltip/>"}</p>
169+
</div>
170+
</pre>
171+
</div>
172+
<div className="section">
173+
<h4 className='title'>Theme and delay</h4>
174+
<p className="sub-title"></p>
175+
<div className="example-jsx">
176+
<div className="side">
177+
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
178+
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
179+
</div>
180+
<div className="side">
181+
<a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
182+
<ReactTooltip id='custom-theme' class='customeTheme'/>
183+
</div>
184+
</div>
185+
<br />
186+
<pre className='example-pre'>
187+
<div>
188+
<p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
189+
"<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
190+
".extraClass {\n" +
191+
" font-size: 20px !important;\n" +
192+
" pointer-events: auto !important;\n" +
193+
" &:hover {\n" +
194+
"visibility: visible !important;\n" +
195+
"opacity: 1 !important;\n" +
196+
" }\n" +
197+
"}"}</p>
198+
</div>
199+
<div>
200+
<p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
201+
"<ReactTooltip class='customeTheme'/>\n" +
202+
" .customeTheme {\n" +
203+
" color: #ff6e00 !important;\n" +
204+
" background-color: orange !important;\n" +
205+
" &.place-top {\n" +
206+
" &:after {\n" +
207+
" border-top-color: orange !important;\n" +
208+
" border-top-style: solid !important;\n" +
209+
" border-top-width: 6px !important;\n" +
210+
" }\n" +
211+
" }\n" +
212+
"}"}</p>
213+
</div>
214+
</pre>
215+
</div>
216+
<div className="section">
217+
<h4 className='title'>Update tip content over time</h4>
218+
<p className="sub-title"></p>
219+
<div className="example-jsx">
220+
<div className="side">
221+
<a data-for='getContent' data-tip>=( •̀д•́)</a>
222+
<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)}/>
223+
</div>
224+
<div className="side">
225+
<a data-for='overTime' data-tip>=( •̀д•́)</a>
226+
<ReactTooltip id='overTime'
227+
getContent={[() => {return new Date().toISOString()}, 1000]}/>
228+
</div>
229+
</div>
230+
<br />
231+
<pre className='example-pre'>
232+
<div>
233+
<p>{"<a data-for='getContent' data-tip>=( •̀д•́)</a>\n" +
234+
"<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
235+
</div>
236+
<div>
237+
<p>{"<a data-for='overTime' data-tip>=( •̀д•́)</a>\n" +
238+
"<ReactTooltip id='overTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
239+
</div>
240+
</pre>
241+
</div>
242+
</section>
61243
</div>
62244
)
63245
}
64246
})
65247

66-
render(<Test />, document.getElementById('main'))
248+
render(<Test />, document.getElementById('main'))

0 commit comments

Comments
 (0)