Moves help_popover component to a common location

1 files changed, 53 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue
new file mode 100644
index 00000000000..540df392e4e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -0,0 +1,53 @@
+<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';
+
+/**
+ * Render a button with a question mark icon
+ * On hover shows a popover. The popover will be dismissed on mouseleave
+ */
+export default {
+  name: 'HelpPopover',
+  components: {
+    Icon,
+  },
+  props: {
+    options: {
+      type: Object,
+      required: false,
+      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>
+  <button
+    type="button"
+    class="btn btn-blank btn-transparent btn-help"
+    tabindex="0"
+  >
+    <icon name="question" />
+  </button>
+</template>