diff --git a/README.md b/README.md index 5fcad300a..c2961f70c 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ className | data-class | String | | extra custom class, can use !importan 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 + scrollHideSelector | data-scroll-hide-selector | String | | custom selector to use when determining which DOM element is listening for scroll events to hide tooltip resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div diff --git a/src/index.js b/src/index.js index 80fcd92ea..c23f6e075 100644 --- a/src/index.js +++ b/src/index.js @@ -55,6 +55,7 @@ class ReactTooltip extends Component { afterHide: PropTypes.func, disable: PropTypes.bool, scrollHide: PropTypes.bool, + scrollHideSelector: PropTypes.string, resizeHide: PropTypes.bool, wrapper: PropTypes.string }; @@ -378,11 +379,24 @@ class ReactTooltip extends Component { */ addScrollListener (e) { const isCaptureMode = this.isCapture(e.currentTarget) - window.addEventListener('scroll', this.hideTooltip, isCaptureMode) + this.getScrollHideListenerNode().addEventListener('scroll', this.hideTooltip, isCaptureMode) } removeScrollListener () { - window.removeEventListener('scroll', this.hideTooltip) + this.getScrollHideListenerNode().removeEventListener('scroll', this.hideTooltip) + } + + /** + * Convenience function to safely get a custom DOM element to listen for + * scroll events, falling back to `window` as a default. + */ + getScrollHideListenerNode () { + if (!this.props.scrollHideSelector) { + return window + } else { + const node = document.querySelector(this.props.scrollHideSelector) + return node || window + } } // Calculation the position