Add mouseleave debounce

1 files changed, 3 insertions, 1 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index 02d3e216510..f5e38fc8879 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie';
+import _ from 'underscore';
 import {
   getCookieName,
   getSelector,
@@ -13,6 +14,7 @@ export const setupFeatureHighlightPopover = (id) => {
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = hidePopover.bind($selector);
+  const debouncedMouseleave = _.debounce(mouseleave, 300);
 
   $selector
     // Setup popover
@@ -28,7 +30,7 @@ export const setupFeatureHighlightPopover = (id) => {
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', mouseleave)
+    .on('mouseleave', debouncedMouseleave)
     .on('inserted.bs.popover', setupDismissButton)
     .on('show.bs.popover', () => {
       window.addEventListener('scroll', hideOnScroll);