Review changes

4 files changed, 17 insertions, 12 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index 983f4eaf4c7..0d385ab0aac 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -1,11 +1,13 @@
 import $ from 'jquery';
 import {
   getSelector,
-  togglePopover,
   inserted,
+} from './feature_highlight_helper';
+import {
+  togglePopover,
   mouseenter,
   debouncedMouseleave,
-} from './feature_highlight_helper';
+} from '../shared/popover';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $selector = $(getSelector(id));
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index bcc7cefc2f2..d5b97ebb264 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -3,7 +3,7 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
-import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
+import { togglePopover } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
@@ -31,5 +31,3 @@ export function inserted() {
     LazyLoader.loadImage(lazyImg);
   }
 }
-
-export { togglePopover, mouseenter, debouncedMouseleave };
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 5a7843f3093..714b543db04 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import { mouseenter, debouncedMouseleave } from './shared/popover';
+import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -52,15 +52,21 @@ export default class Milestone {
     if (!deprecationMesssageContainer) return;
 
     const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML;
-    const popoverLink = deprecationMesssageContainer.querySelector('.popover-link');
+    const $popover = $('.popover-link', deprecationMesssageContainer);
+    const hideOnScroll = togglePopover.bind($popover, false);
 
-    $(popoverLink).popover({
+    $popover.popover({
       content: deprecationMessage,
       html: true,
       placement: 'bottom',
-      trigger: 'manual',
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave());
+    .on('mouseleave', debouncedMouseleave())
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll);
+    })
+    .on('hide.bs.popover', () => {
+      window.removeEventListener('scroll', hideOnScroll);
+    });
   }
 }
diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js
index 66d4bec973f..b406571a1db 100644
--- a/app/assets/javascripts/shared/popover.js
+++ b/app/assets/javascripts/shared/popover.js
@@ -24,8 +24,7 @@ export function mouseenter() {
 
   const showedPopover = togglePopover.call($popover, true);
   if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($popover));
+    $('.popover').on('mouseleave', mouseleave.bind($popover));
   }
 }