Merge pull request #193 from wwayne/hide-specific

hide specific tooltip

Author: wwayne

README.md

@@ -77,11 +77,26 @@ Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
 3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
 
 ## Static Methods
-**ReactTooltip.hide()**: Hide the tooltip manually
+###ReactTooltip.hide(target)
 
-**ReactTooltip.rebuild()**: Rebinding tooltip to the corresponding elements
+> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
 
-**ReactTooltip.show(target)**: Show specific tooltip manually, for example:
+```js
+import {findDOMNode} from 'react-dom'
+import ReactTooltip from 'react-tooltip'
+
+<p ref='foo' data-tip='tooltip'></p>
+<button onClick={() => { ReactTooltip.hide(findDOMNode(this.refs.foo)) }}></button>
+<ReactTooltip />
+```
+
+###ReactTooltip.rebuild()
+
+> Rebinding all tooltips
+
+###ReactTooltip.show(target)
+
+> Show specific tooltip manually, for example:
 
 ```js
 import {findDOMNode} from 'react-dom'

example/src/index.js

@@ -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({
@@ -153,8 +153,14 @@ const Test = React.createClass({
                 <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>
+                <a data-for='custom-off-event' ref='target' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
                 <ReactTooltip id='custom-off-event'/>
+                {/*
+                  <div>
+                    <button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.target)) }}>Show toolip</button>
+                    <button onClick={() => { ReactTooltip.hide(findDOMNode(this.refs.target)) }}>Hide toolip</button>
+                  </div>
+                */}
               </div>
             </div>
             <br />

src/decorators/staticMethods.js

@@ -23,8 +23,8 @@ export default function (target) {
    * Hide all tooltip
    * @trigger ReactTooltip.hide()
    */
-  target.hide = () => {
-    dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE)
+  target.hide = (target) => {
+    dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE, {target})
   }
 
   /**
@@ -58,4 +58,11 @@ export default function (target) {
       this.showTooltip(e, true)
     }
   }
+
+  target.prototype.globalHide = function (event) {
+    if (this.mount) {
+      const hasTarget = event && event.detail && event.detail.target && true || false
+      this.hideTooltip({ currentTarget: hasTarget && event.detail.target }, hasTarget)
+    }
+  }
 }

src/decorators/windowListener.js

@@ -6,8 +6,8 @@ import CONSTANT from '../constant'
 export default function (target) {
   target.prototype.bindWindowEvents = function () {
     // ReactTooltip.hide
-    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
-    window.addEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip, false)
+    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide)
+    window.addEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide, false)
 
     // ReactTooltip.rebuild
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
@@ -23,7 +23,7 @@ export default function (target) {
   }
 
   target.prototype.unbindWindowEvents = function () {
-    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
+    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide)
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
     window.removeEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow)
     window.removeEventListener('resize', this.onWindowResize)

src/index.js

@@ -74,6 +74,7 @@ class ReactTooltip extends Component {
       'hideTooltip',
       'globalRebuild',
       'globalShow',
+      'globalHide',
       'onWindowResize'
     ])
 
@@ -313,12 +314,16 @@ class ReactTooltip extends Component {
   /**
    * When mouse leave, hide tooltip
    */
-  hideTooltip () {
+  hideTooltip (e, hasTarget) {
+    if (!this.mount) return
+    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
-
-    if (!this.mount) return
-
     const resetState = () => {
       const isVisible = this.state.show
       this.setState({