1 files changed, 15 insertions, 25 deletions
diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue
index 821ae6cec52..051c65bae70 100644
--- a/app/assets/javascripts/vue_shared/components/help_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -1,8 +1,5 @@
 <script>
-import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
-import { inserted } from '~/feature_highlight/feature_highlight_helper';
-import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
+import { GlButton, GlPopover } from '@gitlab/ui';
 
 /**
  * Render a button with a question mark icon
@@ -12,6 +9,7 @@ export default {
   name: 'HelpPopover',
   components: {
     GlButton,
+    GlPopover,
   },
   props: {
     options: {
@@ -20,28 +18,20 @@ export default {
       default: () => ({}),
     },
   },
-  mounted() {
-    const $el = $(this.$el);
-
-    $el
-      .popover({
-        html: true,
-        trigger: 'focus',
-        container: 'body',
-        placement: 'top',
-        template:
-          '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-header"></p><div class="popover-body"></div></div>',
-        ...this.options,
-      })
-      .on('mouseenter', mouseenter)
-      .on('mouseleave', debouncedMouseleave(300))
-      .on('inserted.bs.popover', inserted)
-      .on('show.bs.popover', () => {
-        window.addEventListener('scroll', togglePopover.bind($el, false), { once: true });
-      });
-  },
 };
 </script>
 <template>
-  <gl-button variant="link" icon="question" tabindex="0" />
+  <span>
+    <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
+    <gl-popover triggers="hover focus" :target="() => $refs.popoverTrigger.$el" v-bind="options">
+      <template #title>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="options.title"></span>
+      </template>
+      <template #default>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="options.content"></div>
+      </template>
+    </gl-popover>
+  </span>
 </template>