Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to specify custom DOM element for scrollHide scroll events #291

Closed
wants to merge 1 commit into from
Closed

Add ability to specify custom DOM element for scrollHide scroll events #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 16 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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
Expand Down