Merge pull request #173 from wwayne/callback

Add new attribute afterShow and afterHide

README.md

@@ -19,7 +19,7 @@ npm install react-tooltip
 1 . Require react-tooltip after installation
 
 ```js
-var ReactTooltip = require("react-tooltip")
+import ReactTooltip from 'react-tooltip'
 ```
 
 2 . Add data-tip = "your placeholder" to your element
@@ -63,6 +63,8 @@ class	|   data-class  |  String  |   | extra custom class, can use !important to
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
  getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
  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
 
 ## Using react component as tooltip
 Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

src/index.js

@@ -40,7 +40,9 @@ class ReactTooltip extends Component {
     isCapture: PropTypes.bool,
     globalEventOff: PropTypes.string,
     getContent: PropTypes.any,
-    countTransform: PropTypes.bool
+    countTransform: PropTypes.bool,
+    afterShow: PropTypes.func,
+    afterHide: PropTypes.func
   }
 
   constructor (props) {
@@ -255,24 +257,27 @@ class ReactTooltip extends Component {
    */
   updateTooltip (e) {
     const {delayShow, show} = this.state
+    const {afterShow} = this.props
     let {placeholder} = this.state
     const delayTime = show ? 0 : parseInt(delayShow, 10)
     const eventTarget = e.currentTarget
 
     const updateState = () => {
       if (typeof placeholder === 'string') placeholder = placeholder.trim()
       if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) {
+        const isInvisible = !this.state.show
         this.setState({
           currentEvent: e,
           currentTarget: eventTarget,
           show: true
         }, () => {
           this.updatePosition()
+          if (isInvisible && afterShow) afterShow()
         })
       }
     }
 
-    this.clearTimer()
+    clearTimeout(this.delayShowLoop)
     if (delayShow) {
       this.delayShowLoop = setTimeout(updateState, delayTime)
     } else {
@@ -285,14 +290,18 @@ class ReactTooltip extends Component {
    */
   hideTooltip () {
     const {delayHide} = this.state
+    const {afterHide} = this.props
 
     if (!this.mount) return
 
     const resetState = () => {
+      const isVisible = this.state.show
       this.setState({
         show: false
+      }, () => {
+        this.removeScrollListener()
+        if (isVisible && afterHide) afterHide()
       })
-      this.removeScrollListener()
     }
 
     this.clearTimer()