Skip to content

Commit aba7e0d

Browse files
wwaynewwayne
authored
Merge pull request #187 from wwayne/disable
Add disable option
2 parents 502f6f5 + 41b0f2e commit aba7e0d

File tree

3 files changed

+26
-213
lines changed

3 files changed

+26
-213
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ class | data-class | String | | extra custom class, can use !important to
6565
countTransform | data-count-transform | Bool | True, False | Tell tooltip if it needs to count parents' transform into position calculation, the default is true, but it should be set to false when using with react-list
6666
afterShow | null | Func | () => {} | Function that will be called after tooltip show
6767
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
68+
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false
6869

6970
## Using react component as tooltip
7071
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

‎example/src/index.js

Lines changed: 18 additions & 212 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} from 'react-dom'
4+
import {render, findDOMNode} from 'react-dom'
55
import ReactTooltip from '../../src'
66

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

@@ -39,219 +40,24 @@ const Test = React.createClass({
3940
})
4041
},
4142

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+
4255
render () {
43-
let { place, type, effect } = this.state
56+
let { place, type, effect, disable } = this.state
4457
return (
4558
<div>
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-
117-
<div className="example-jsx">
118-
<div className="side"><a data-tip data-for='global'> σ`∀´)σ </a></div>
119-
<div className="side"><a data-tip data-for='global'> (〃∀〃) </a></div>
120-
<ReactTooltip id='global' aria-haspopup="true" role="example">
121-
<p>This is a global react component tooltip</p>
122-
<p>You can put every thing here</p>
123-
<ul>
124-
<li>Word</li>
125-
<li>Chart</li>
126-
<li>Else</li>
127-
</ul>
128-
</ReactTooltip>
129-
</div>
130-
<pre className='example-pre'>
131-
<div>
132-
<p>{"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
133-
"<a data-tip data-for='global'> (〃∀〃) </a>\n" +
134-
"<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
135-
" <p>This is a global react component tooltip</p>\n" +
136-
" <p>You can put every thing here</p>\n" +
137-
" <ul>\n" +
138-
" " + " " + " <li>Word</li>\n" +
139-
" " + " " + " <li>Chart</li>\n" +
140-
" " + " " + " <li>Else</li>\n" +
141-
" </ul>\n" +
142-
"</ReactTooltip>"}</p>
143-
</div>
144-
</pre>
145-
</div>
146-
</section>
147-
148-
<section className="advance">
149-
<div className="section">
150-
<h4 className='title'>Custom event</h4>
151-
<p className="sub-title"></p>
152-
153-
<div className="example-jsx">
154-
<div className="side">
155-
<a data-for='custom-event' data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
156-
<ReactTooltip id='custom-event' globalEventOff='click'/>
157-
</div>
158-
159-
<div className="side">
160-
<a data-for='custom-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
161-
<ReactTooltip id='custom-off-event'/>
162-
</div>
163-
</div>
164-
<br />
165-
<pre className='example-pre'>
166-
<div>
167-
<p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
168-
"<ReactTooltip globalEventOff='click' />"}</p>
169-
</div>
170-
<div>
171-
<p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
172-
"<ReactTooltip/>"}</p>
173-
</div>
174-
</pre>
175-
</div>
176-
177-
<div className="section">
178-
<h4 className='title'>Theme and delay</h4>
179-
<p className="sub-title"></p>
180-
181-
<div className="example-jsx">
182-
<div className="side">
183-
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
184-
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
185-
</div>
186-
187-
<div className="side">
188-
<a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
189-
<ReactTooltip id='custom-theme' class='customeTheme'/>
190-
</div>
191-
</div>
192-
<br />
193-
<pre className='example-pre'>
194-
<div>
195-
<p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
196-
"<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
197-
".extraClass {\n" +
198-
" font-size: 20px !important;\n" +
199-
" pointer-events: auto !important;\n" +
200-
" &:hover {\n" +
201-
"visibility: visible !important;\n" +
202-
"opacity: 1 !important;\n" +
203-
" }\n" +
204-
"}"}</p>
205-
</div>
206-
207-
<div>
208-
<p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
209-
"<ReactTooltip class='customeTheme'/>\n" +
210-
" .customeTheme {\n" +
211-
" color: #ff6e00 !important;\n" +
212-
" background-color: orange !important;\n" +
213-
" &.place-top {\n" +
214-
" &:after {\n" +
215-
" border-top-color: orange !important;\n" +
216-
" border-top-style: solid !important;\n" +
217-
" border-top-width: 6px !important;\n" +
218-
" }\n" +
219-
" }\n" +
220-
"}"}</p>
221-
</div>
222-
</pre>
223-
</div>
224-
225-
<div className="section">
226-
<h4 className='title'>Update tip content over time</h4>
227-
<p className="sub-title"></p>
228-
229-
<div className="example-jsx">
230-
<div className="side">
231-
<a data-for='getContent' data-tip>=( •̀д•́)</a>
232-
<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)}/>
233-
</div>
234-
235-
<div className="side">
236-
<a data-for='overTime' data-tip>=( •̀д•́)</a>
237-
<ReactTooltip id='overTime'
238-
getContent={[() => {return new Date().toISOString()}, 1000]}/>
239-
</div>
240-
</div>
241-
<br />
242-
<pre className='example-pre'>
243-
<div>
244-
<p>{"<a data-for='getContent' data-tip>=( •̀д•́)</a>\n" +
245-
"<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
246-
</div>
247-
248-
<div>
249-
<p>{"<a data-for='overTime' data-tip>=( •̀д•́)</a>\n" +
250-
"<ReactTooltip id='overTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
251-
</div>
252-
</pre>
253-
</div>
254-
</section>
59+
<button ref='btn' data-tip onClick={this.showError} data-tip-disable={disable}>CLick</button>
60+
<ReactTooltip getContent={this.giveError} place='bottom' delayHide={1000} />
25561
</div>
25662
)
25763
}

‎src/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ class ReactTooltip extends Component {
4242
getContent: PropTypes.any,
4343
countTransform: PropTypes.bool,
4444
afterShow: PropTypes.func,
45-
afterHide: PropTypes.func
45+
afterHide: PropTypes.func,
46+
disable: PropTypes.bool
4647
}
4748

4849
constructor (props) {
@@ -200,6 +201,11 @@ class ReactTooltip extends Component {
200201
* When mouse enter, show the tooltip
201202
*/
202203
showTooltip (e, isGlobalCall) {
204+
const disabled = e.currentTarget.getAttribute('data-tip-disable')
205+
? e.currentTarget.getAttribute('data-tip-disable') === 'true'
206+
: (this.props.disable || false)
207+
if (disabled) return
208+
203209
if (isGlobalCall) {
204210
// Don't trigger other elements belongs to other ReactTooltip
205211
const targetArray = this.getTargetArray(this.props.id)

0 commit comments

Comments
 (0)