1 files changed, 22 insertions, 0 deletions
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index e6e3a66aa20..325fa570f37 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
+import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -43,4 +44,25 @@ export default class Milestone {
         .catch(() => flash('Error loading milestone tab'));
     }
   }
+
+  static initDeprecationMessage() {
+    const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message');
+
+    if (!deprecationMesssageContainer) return;
+
+    const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML;
+    const $popover = $('.js-popover-link', deprecationMesssageContainer);
+    const hideOnScroll = togglePopover.bind($popover, false);
+
+    $popover.popover({
+      content: deprecationMessage,
+      html: true,
+      placement: 'bottom',
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave())
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll, { once: true });
+    });
+  }
 }