diff --git a/src/components/Tooltip/TooltipPropTypes.js b/src/components/Tooltip/TooltipPropTypes.js index 699c6c643fb3..7478a2a23e4c 100644 --- a/src/components/Tooltip/TooltipPropTypes.js +++ b/src/components/Tooltip/TooltipPropTypes.js @@ -21,11 +21,19 @@ const propTypes = { // Any additional amount to manually adjust the vertical position of the tooltip. // A positive value shifts the tooltip down, and a negative value shifts it up. shiftVertical: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), + + // Delay before the tooltip is visible + showDelay: PropTypes.number, + + // Delay before the tooltip is hidden + hideDelay: PropTypes.number, }; const defaultProps = { shiftHorizontal: 0, shiftVertical: 0, + showDelay: 500, + hideDelay: 0, }; export { diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index cd38fc3ce0fc..994f2131cc7a 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -127,6 +127,7 @@ class Tooltip extends PureComponent { * Display the tooltip in an animation. */ showTooltip() { + this.animation.stopAnimation(); this.shouldStartShowAnimation = true; // We have to dynamically calculate the position here as tooltip could have been rendered on some elments @@ -148,6 +149,7 @@ class Tooltip extends PureComponent { Animated.timing(this.animation, { toValue: 1, duration: 140, + delay: this.props.showDelay, }).start(); } }); @@ -157,10 +159,12 @@ class Tooltip extends PureComponent { * Hide the tooltip in an animation. */ hideTooltip() { + this.animation.stopAnimation(); this.shouldStartShowAnimation = false; Animated.timing(this.animation, { toValue: 0, duration: 140, + delay: this.props.hideDelay, }).start(); }