Merge pull request #201 from wwayne/prevent-empty-tip

Hide tooltip if the tip is empty or disabled

Author: wwayne

example/src/index.js

@@ -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">

src/index.js

@@ -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([
@@ -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)
@@ -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
@@ -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',
@@ -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)
@@ -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])
@@ -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({
@@ -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({
@@ -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) {
@@ -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'},
@@ -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}`}

src/utils/getTipContent.js

@@ -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
   }