1 files changed, 3 insertions, 28 deletions
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index f480e72961c..bcc7cefc2f2 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -3,20 +3,10 @@ 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';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function togglePopover(show) {
-  const isAlreadyShown = this.hasClass('js-popover-show');
-  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
-    return false;
-  }
-  this.popover(show ? 'show' : 'hide');
-  this.toggleClass('disable-animation js-popover-show', show);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
 
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;
@@ -58,3 +31,5 @@ export function inserted() {
     LazyLoader.loadImage(lazyImg);
   }
 }
+
+export { togglePopover, mouseenter, debouncedMouseleave };