Create scroll hide option

Author: wwayne

README.md

@@ -66,6 +66,7 @@ class	|   data-class  |  String  |   | extra custom class, can use !important to
  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
+ scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
 
 ## Using react component as tooltip
 Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

example/src/index.js

@@ -150,7 +150,7 @@ const Test = React.createClass({
             <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'/>
+                <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>

src/index.js

@@ -43,7 +43,8 @@ class ReactTooltip extends Component {
     countTransform: PropTypes.bool,
     afterShow: PropTypes.func,
     afterHide: PropTypes.func,
-    disable: PropTypes.bool
+    disable: PropTypes.bool,
+    scrollHide: PropTypes.bool
   }
 
   constructor (props) {
@@ -231,6 +232,15 @@ class ReactTooltip extends Component {
 
     // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
     const switchToSolid = e instanceof window.FocusEvent || isGlobalCall
+
+    // if it need to skip adding hide listener to scroll
+    let scrollHide = true
+    if (e.currentTarget.getAttribute('data-scroll-hide')) {
+      scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true'
+    } else if (this.props.scrollHide != null) {
+      scrollHide = this.props.scrollHide
+    }
+
     this.setState({
       placeholder,
       place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top',
@@ -250,7 +260,7 @@ class ReactTooltip extends Component {
         ? e.currentTarget.getAttribute('data-count-transform') === 'true'
         : (this.props.countTransform != null ? this.props.countTransform : true)
     }, () => {
-      this.addScrollListener(e)
+      if (scrollHide) this.addScrollListener(e)
       this.updateTooltip(e)
 
       if (getContent && Array.isArray(getContent)) {