Skip to content

Commit

Permalink
Merge pull request #187 from wwayne/disable
Browse files Browse the repository at this point in the history 
Add disable option
  • Loading branch information
@wwayne
wwayne committed Sep 7, 2016
2 parents 502f6f5 + 41b0f2e commit aba7e0d
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 213 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ class | data-class | String | | extra custom class, can use !important to
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
afterShow | null | Func | () => {} | Function that will be called after tooltip show
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false

## Using react component as tooltip
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
Expand Down
230 changes: 18 additions & 212 deletions example/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict'

import React from 'react'
import {render} from 'react-dom'
import {render, findDOMNode} from 'react-dom'
import ReactTooltip from '../../src'

const Test = React.createClass({
Expand All @@ -11,7 +11,8 @@ const Test = React.createClass({
place: 'top',
type: 'dark',
effect: 'float',
condition: false
condition: false,
disable: true
}
},

Expand Down Expand Up @@ -39,219 +40,24 @@ const Test = React.createClass({
})
},

showError () {
this.setState({
disable: false
}, () => {
ReactTooltip.show(findDOMNode(this.refs.btn))
})
},

giveError () {
return 'error'
},

render () {
let { place, type, effect } = this.state
let { place, type, effect, disable } = this.state
return (
<div>
<section className='tooltip-example'>
<h4 className='title'>React Tooltip</h4>
<div className='demonstration'>
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip">
◕‿‿◕
</a>
</div>
<div className='control-panel'>
<div className='button-group'>
<div className='item'>
<p>Place</p>
<a className={place === 'top' ? 'active' : ''} onClick={this.changePlace.bind(this, 'top')}>Top<span className='mark'>(default)</span></a>
<a className={place === 'right' ? 'active' : ''} onClick={this.changePlace.bind(this, 'right')}>Right</a>
<a className={place === 'bottom' ? 'active' : ''} onClick={this.changePlace.bind(this, 'bottom')}>Bottom</a>
<a className={place === 'left' ? 'active' : ''} onClick={this.changePlace.bind(this, 'left')}>Left</a>
</div>
<div className='item'>
<p>Type</p>
<a className={type === 'dark' ? 'active' : ''} onClick={this.changeType.bind(this, 'dark')}>Dark<span className='mark'>(default)</span></a>
<a className={type === 'success' ? 'active' : ''} onClick={this.changeType.bind(this, 'success')}>Success</a>
<a className={type === 'warning' ? 'active' : ''} onClick={this.changeType.bind(this, 'warning')}>Warning</a>
<a className={type === 'error' ? 'active' : ''} onClick={this.changeType.bind(this, 'error')}>Error</a>
<a className={type === 'info' ? 'active' : ''} onClick={this.changeType.bind(this, 'info')}>Info</a>
<a className={type === 'light' ? 'active' : ''} onClick={this.changeType.bind(this, 'light')}>Light</a>
</div>
<div className='item'>
<p>Effect</p>
<a className={effect === 'float' ? 'active' : ''} onClick={this.changeEffect.bind(this, 'float')}>Float<span className='mark'>(default)</span></a>
<a className={effect === 'solid' ? 'active' : ''} onClick={this.changeEffect.bind(this, 'solid')}>Solid</a>
</div>
</div>
<pre>
<div>
<p className='label'>Code</p>
<hr></hr>
<p>{'<a data-tip="React-tooltip"> ◕‿‿◕ </a>'}</p>
<p>{'<ReactTooltip place="' + place + '" type="' + type + '" effect="' + effect + '"/>'}</p>
</div>
</pre>
</div>
<ReactTooltip id='main' place={place} type={type} effect={effect} multiline={true}/>
</section>
<section className="advance">
<div className="section">
<h4 className='title'>Advance features</h4>
<p className="sub-title">Use everything as tooltip</p>

<div className="example-jsx">
<div className="side" style={{ transform: 'translate3d(5px, 5px, 5px)' }}>
<a data-tip data-for='happyFace'> d(`･∀･)b </a>
<ReactTooltip id='happyFace' type="error"><span>Show happy face</span></ReactTooltip>
</div>
<div className="side">
<a data-tip data-for='sadFace'> இдஇ </a>
<ReactTooltip id='sadFace' type="warning" effect="solid"><span>Show sad face</span></ReactTooltip>
</div>
</div>
<br />
<pre className='example-pre'>
<div>
<p>{"<a data-tip data-for='happyFace'> d(`･∀･)b </a>\n" +
"<ReactTooltip id='happyFace' type='error'>\n" +
" " + " " + "<span>Show happy face</span>\n" +
"</ReactTooltip>\n" +
"<a data-tip data-for='sadFace'> இдஇ </a>\n" +
"<ReactTooltip id='sadFace' type='warning' effect='solid'>\n" +
" " + " " + "<span>Show sad face</span>\n" +
"</ReactTooltip>"}</p>
</div>
</pre>

<div className="example-jsx">
<div className="side"><a data-tip data-for='global'> σ`∀´)σ </a></div>
<div className="side"><a data-tip data-for='global'> (〃∀〃) </a></div>
<ReactTooltip id='global' aria-haspopup="true" role="example">
<p>This is a global react component tooltip</p>
<p>You can put every thing here</p>
<ul>
<li>Word</li>
<li>Chart</li>
<li>Else</li>
</ul>
</ReactTooltip>
</div>
<pre className='example-pre'>
<div>
<p>{"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
"<a data-tip data-for='global'> (〃∀〃) </a>\n" +
"<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
" <p>This is a global react component tooltip</p>\n" +
" <p>You can put every thing here</p>\n" +
" <ul>\n" +
" " + " " + " <li>Word</li>\n" +
" " + " " + " <li>Chart</li>\n" +
" " + " " + " <li>Else</li>\n" +
" </ul>\n" +
"</ReactTooltip>"}</p>
</div>
</pre>
</div>
</section>

<section className="advance">
<div className="section">
<h4 className='title'>Custom event</h4>
<p className="sub-title"></p>

<div className="example-jsx">
<div className="side">
<a data-for='custom-event' data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
<ReactTooltip id='custom-event' globalEventOff='click'/>
</div>

<div className="side">
<a data-for='custom-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
<ReactTooltip id='custom-off-event'/>
</div>
</div>
<br />
<pre className='example-pre'>
<div>
<p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
"<ReactTooltip globalEventOff='click' />"}</p>
</div>
<div>
<p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
"<ReactTooltip/>"}</p>
</div>
</pre>
</div>

<div className="section">
<h4 className='title'>Theme and delay</h4>
<p className="sub-title"></p>

<div className="example-jsx">
<div className="side">
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
</div>

<div className="side">
<a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
<ReactTooltip id='custom-theme' class='customeTheme'/>
</div>
</div>
<br />
<pre className='example-pre'>
<div>
<p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
"<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
".extraClass {\n" +
" font-size: 20px !important;\n" +
" pointer-events: auto !important;\n" +
" &:hover {\n" +
"visibility: visible !important;\n" +
"opacity: 1 !important;\n" +
" }\n" +
"}"}</p>
</div>

<div>
<p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
"<ReactTooltip class='customeTheme'/>\n" +
" .customeTheme {\n" +
" color: #ff6e00 !important;\n" +
" background-color: orange !important;\n" +
" &.place-top {\n" +
" &:after {\n" +
" border-top-color: orange !important;\n" +
" border-top-style: solid !important;\n" +
" border-top-width: 6px !important;\n" +
" }\n" +
" }\n" +
"}"}</p>
</div>
</pre>
</div>

<div className="section">
<h4 className='title'>Update tip content over time</h4>
<p className="sub-title"></p>

<div className="example-jsx">
<div className="side">
<a data-for='getContent' data-tip>=( •̀д•́)</a>
<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)}/>
</div>

<div className="side">
<a data-for='overTime' data-tip>=( •̀д•́)</a>
<ReactTooltip id='overTime'
getContent={[() => {return new Date().toISOString()}, 1000]}/>
</div>
</div>
<br />
<pre className='example-pre'>
<div>
<p>{"<a data-for='getContent' data-tip>=( •̀д•́)</a>\n" +
"<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
</div>

<div>
<p>{"<a data-for='overTime' data-tip>=( •̀д•́)</a>\n" +
"<ReactTooltip id='overTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
</div>
</pre>
</div>
</section>
<button ref='btn' data-tip onClick={this.showError} data-tip-disable={disable}>CLick</button>
<ReactTooltip getContent={this.giveError} place='bottom' delayHide={1000} />
</div>
)
}
Expand Down
8 changes: 7 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ class ReactTooltip extends Component {
getContent: PropTypes.any,
countTransform: PropTypes.bool,
afterShow: PropTypes.func,
afterHide: PropTypes.func
afterHide: PropTypes.func,
disable: PropTypes.bool
}

constructor (props) {
Expand Down Expand Up @@ -200,6 +201,11 @@ class ReactTooltip extends Component {
* When mouse enter, show the tooltip
*/
showTooltip (e, isGlobalCall) {
const disabled = e.currentTarget.getAttribute('data-tip-disable')
? e.currentTarget.getAttribute('data-tip-disable') === 'true'
: (this.props.disable || false)
if (disabled) return

if (isGlobalCall) {
// Don't trigger other elements belongs to other ReactTooltip
const targetArray = this.getTargetArray(this.props.id)
Expand Down

0 comments on commit aba7e0d

Please sign in to comment.