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 | 40 |
1 files changed, 15 insertions, 25 deletions
diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue index 821ae6cec52..051c65bae70 100644 --- a/app/assets/javascripts/vue_shared/components/help_popover.vue +++ b/app/assets/javascripts/vue_shared/components/help_popover.vue @@ -1,8 +1,5 @@ <script> -import $ from 'jquery'; -import { GlButton } from '@gitlab/ui'; -import { inserted } from '~/feature_highlight/feature_highlight_helper'; -import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover'; +import { GlButton, GlPopover } from '@gitlab/ui'; /** * Render a button with a question mark icon @@ -12,6 +9,7 @@ export default { name: 'HelpPopover', components: { GlButton, + GlPopover, }, props: { options: { @@ -20,28 +18,20 @@ export default { 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> - <gl-button variant="link" icon="question" tabindex="0" /> + <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> + </template> + <template #default> + <!-- eslint-disable-next-line vue/no-v-html --> + <div v-html="options.content"></div> + </template> + </gl-popover> + </span> </template> |