1 files changed, 42 insertions, 0 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue
new file mode 100644
index 00000000000..772a16e9ba2
--- /dev/null
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tags_popover.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlIcon, GlPopover, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { timelineEventTagsPopover } from './constants';
+
+export default {
+  name: 'TimelineEventsTagsPopover',
+  components: {
+    GlIcon,
+    GlPopover,
+    GlLink,
+  },
+  i18n: timelineEventTagsPopover,
+  learnMoreLink: helpPagePath('ee/operations/incident_management/incident_timeline_events', {
+    anchor: 'incident-tags',
+  }),
+};
+</script>
+
+<template>
+  <span>
+    <gl-icon id="timeline-events-tag-question" name="question-o" class="gl-text-blue-600" />
+
+    <gl-popover
+      target="timeline-events-tag-question"
+      triggers="hover focus"
+      placement="top"
+      container="viewport"
+      :title="$options.i18n.title"
+    >
+      <div>
+        <p class="gl-mb-0">
+          {{ $options.i18n.message }}
+        </p>
+        <gl-link target="_blank" class="gl-font-sm" :href="$options.learnMoreLink">{{
+          $options.i18n.link
+        }}</gl-link
+        >.
+      </div>
+    </gl-popover>
+  </span>
+</template>