Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hide tooltip if the tip is empty or disabled #201

Merged
merged 1 commit into from
Sep 30, 2016
Merged

Hide tooltip if the tip is empty or disabled #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ const Test = React.createClass({
<div className="example-jsx">
<div className="side">
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
{/* <a data-for='custom-class' data-tip='' data-tip-disable='true'>empty testing</a> */}
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
</div>
<div className="side">
Expand Down
35 changes: 19 additions & 16 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ class ReactTooltip extends Component {
eventOff: props.eventOff || null,
currentEvent: null, // Current mouse event
currentTarget: null, // Current target of mouse event
ariaProps: parseAria(props) // aria- and role attributes
ariaProps: parseAria(props), // aria- and role attributes
isEmptyTip: false,
disable: false
}

this.bind([
Expand Down Expand Up @@ -207,11 +209,6 @@ 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 All @@ -234,6 +231,7 @@ class ReactTooltip extends Component {
}
}
const placeholder = getTipContent(originTooltip, content, isMultiline)
const isEmptyTip = typeof placeholder === 'string' && placeholder === ''

// If it is focus event or called by ReactTooltip.show, switch to `solid` effect
const switchToSolid = e instanceof window.FocusEvent || isGlobalCall
Expand All @@ -248,6 +246,7 @@ class ReactTooltip extends Component {

this.setState({
placeholder,
isEmptyTip,
place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top',
type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark',
effect: switchToSolid && 'solid' || e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float',
Expand All @@ -260,7 +259,10 @@ class ReactTooltip extends Component {
border: e.currentTarget.getAttribute('data-border')
? e.currentTarget.getAttribute('data-border') === 'true'
: (this.props.border || false),
extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || ''
extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '',
disable: e.currentTarget.getAttribute('data-tip-disable')
? e.currentTarget.getAttribute('data-tip-disable') === 'true'
: (this.props.disable || false)
}, () => {
if (scrollHide) this.addScrollListener(e)
this.updateTooltip(e)
Expand All @@ -270,8 +272,10 @@ class ReactTooltip extends Component {
if (this.mount) {
const {getContent} = this.props
const placeholder = getTipContent(originTooltip, getContent[0](), isMultiline)
const isEmptyTip = typeof placeholder === 'string' && placeholder === ''
this.setState({
placeholder
placeholder,
isEmptyTip
})
}
}, getContent[1])
Expand All @@ -283,14 +287,14 @@ class ReactTooltip extends Component {
* When mouse hover, updatetooltip
*/
updateTooltip (e) {
const {delayShow, show} = this.state
const {delayShow, show, isEmptyTip, disable} = this.state
const {afterShow} = this.props
let {placeholder} = this.state
const delayTime = show ? 0 : parseInt(delayShow, 10)
const eventTarget = e.currentTarget

if (isEmptyTip || disable) return // if the tooltip is empty, disable the tooltip
const updateState = () => {
if (typeof placeholder === 'string') placeholder = placeholder.trim()
if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) {
const isInvisible = !this.state.show
this.setState({
Expand All @@ -316,15 +320,16 @@ class ReactTooltip extends Component {
* When mouse leave, hide tooltip
*/
hideTooltip (e, hasTarget) {
const {delayHide, isEmptyTip, disable} = this.state
const {afterHide} = this.props
if (!this.mount) return
if (isEmptyTip || disable) return // if the tooltip is empty, disable the tooltip
if (hasTarget) {
// Don't trigger other elements belongs to other ReactTooltip
const targetArray = this.getTargetArray(this.props.id)
const isMyElement = targetArray.some(ele => ele === e.currentTarget)
if (!isMyElement || !this.state.show) return
}
const {delayHide} = this.state
const {afterHide} = this.props
const resetState = () => {
const isVisible = this.state.show
this.setState({
Expand Down Expand Up @@ -360,7 +365,6 @@ class ReactTooltip extends Component {
updatePosition () {
const {currentEvent, currentTarget, place, effect, offset} = this.state
const node = ReactDOM.findDOMNode(this)

const result = getPosition(currentEvent, currentTarget, node, place, effect, offset)

if (result.isNewState) {
Expand Down Expand Up @@ -397,10 +401,10 @@ class ReactTooltip extends Component {
}

render () {
const {placeholder, extraClass, html, ariaProps} = this.state
const {placeholder, extraClass, html, ariaProps, disable, isEmptyTip} = this.state
let tooltipClass = classname(
'__react_component_tooltip',
{'show': this.state.show},
{'show': this.state.show && !disable && !isEmptyTip},
{'border': this.state.border},
{'place-top': this.state.place === 'top'},
{'place-bottom': this.state.place === 'bottom'},
Expand All @@ -413,7 +417,6 @@ class ReactTooltip extends Component {
{'type-info': this.state.type === 'info'},
{'type-light': this.state.type === 'light'}
)

if (html) {
return (
<div className={`${tooltipClass} ${extraClass}`}
Expand Down
1 change: 1 addition & 0 deletions src/utils/getTipContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function (tip, children, multiline) {

const regexp = /<br\s*\/?>/
if (!multiline || multiline === 'false' || !regexp.test(tip)) {
// No trim(), so that user can keep their input
return tip
}

Expand Down