diff --git a/README.md b/README.md index 0b7bebf..b4be4c8 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ const HeaderWithTooltip = withTooltip(Header, { |distance|10|Any number (pixels)|Specifies how far away the tooltip is from its element.| |offset|0|Any number (pixels)|Offsets the tooltip on its opposite axis. For position top and bottom, it acts as offsetX. For position left and right, it acts as offsetY.| |hideOnClick|`true`|`true` `false` `'persistent'`|Specifies whether to hide a tooltip upon clicking its element after hovering over.| +|hideOnScroll|`false`|`true` `false`|Specifies whether to hide a tooltip on scroll event.| |multiple|`false`|`true` `false`|Specifies whether to allow multiple tooltips open on the page (click trigger only).| |followCursor|`false`|`true` `false`|Specifies whether to follow the user's mouse cursor (mouse devices only).| |inertia|`false`|`true` `false`|Modifies the transition-timing-function with a cubic bezier to create a "slingshot" intertial effect.| diff --git a/index.d.ts b/index.d.ts index a95c697..6e9cab1 100644 --- a/index.d.ts +++ b/index.d.ts @@ -40,6 +40,7 @@ export interface TooltipProps { distance?: number; offset?: number; hideOnClick?: boolean | "persistent"; + hideOnScroll?: boolean; multiple?: boolean; followCursor?: boolean; inertia?: boolean; diff --git a/src/Tooltip/component.js b/src/Tooltip/component.js index 0a89f84..de558de 100644 --- a/src/Tooltip/component.js +++ b/src/Tooltip/component.js @@ -18,6 +18,7 @@ const defaultProps = { theme: 'dark', offset: 0, hideOnClick: true, + hideOnScroll: false, multiple: false, followCursor: false, inertia: false, @@ -202,6 +203,7 @@ class Tooltip extends Component { theme: this.props.theme, offset: this.props.offset, hideOnClick: this.props.hideOnClick, + hideOnScroll: this.props.hideOnScroll, multiple: this.props.multiple, size: this.props.size, followCursor: this.props.followCursor, diff --git a/src/Tooltip/js/core/getEventListenerHandlers.js b/src/Tooltip/js/core/getEventListenerHandlers.js index 2d9af62..448c267 100644 --- a/src/Tooltip/js/core/getEventListenerHandlers.js +++ b/src/Tooltip/js/core/getEventListenerHandlers.js @@ -20,6 +20,7 @@ export default function getEventListenerHandlers(el, popper, settings) { interactiveBorder, distance, hideOnClick, + hideOnScroll, trigger, touchHold, touchWait @@ -94,6 +95,7 @@ export default function getEventListenerHandlers(el, popper, settings) { const triggerHide = () => { document.body.removeEventListener('mouseleave', hide) document.removeEventListener('mousemove', handleMousemove) + document.removeEventListener('scroll', hide); hide() } @@ -115,6 +117,10 @@ export default function getEventListenerHandlers(el, popper, settings) { } } + if (hideOnScroll) { + document.addEventListener('scroll', hide); + } + document.body.addEventListener('mouseleave', hide) document.addEventListener('mousemove', handleMousemove) diff --git a/src/Tooltip/js/core/globals.js b/src/Tooltip/js/core/globals.js index bbdc132..fd88802 100644 --- a/src/Tooltip/js/core/globals.js +++ b/src/Tooltip/js/core/globals.js @@ -50,6 +50,7 @@ export const Defaults = { distance: 10, offset: 0, hideOnClick: true, + hideOnScroll: false, multiple: false, followCursor: false, inertia: false,