diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/help_popover.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/help_popover.vue | 17 |
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> |