1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/reports/help_popover.vue b/app/assets/javascripts/vue_shared/components/reports/help_popover.vue
new file mode 100644
index 00000000000..c5faa29fd2a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/reports/help_popover.vue
@@ -0,0 +1,48 @@
+<script>
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+import { inserted } from '~/feature_highlight/feature_highlight_helper';
+import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
+
+export default {
+  name: 'ReportsHelpPopover',
+  components: {
+    Icon,
+  },
+  props: {
+    options: {
+      type: Object,
+      required: true,
+    },
+  },
+  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>
+  <button
+    type="button"
+    class="btn btn-blank btn-transparent btn-help"
+    tabindex="0"
+  >
+    <icon name="question" />
+  </button>
+</template>