1 files changed, 9 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue
index 051c65bae70..f36b9107a6e 100644
--- a/app/assets/javascripts/vue_shared/components/help_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlPopover } from '@gitlab/ui';
+import { GlButton, GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 
 /**
  * Render a button with a question mark icon
@@ -11,6 +11,9 @@ export default {
     GlButton,
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     options: {
       type: Object,
@@ -22,15 +25,13 @@ export default {
 </script>
 <template>
   <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>
+    <gl-button ref="popoverTrigger" variant="link" icon="question" :aria-label="__('Help')" />
+    <gl-popover :target="() => $refs.popoverTrigger.$el" v-bind="options">
+      <template v-if="options.title" #title>
+        <span v-safe-html="options.title"></span>
       </template>
       <template #default>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-html="options.content"></div>
+        <div v-safe-html="options.content"></div>
       </template>
     </gl-popover>
   </span>