Merge pull request #19340 from guerler/consistent_help_popper

Use popper wrapper for help text popover

client/src/components/Help/HelpPopover.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { BPopover } from "bootstrap-vue";
-
 import HelpTerm from "./HelpTerm.vue";
+import Popper from "@/components/Popper/Popper.vue";
 
 interface Props {
-    target: any;
+    target: HTMLElement;
     term: string;
 }
 
 defineProps<Props>();
 </script>
 
 <template>
-    <BPopover v-if="target" :target="target" triggers="hover" placement="bottom">
-        <HelpTerm :term="term" />
-    </BPopover>
+    <Popper v-if="target" :reference-el="target" mode="light">
+        <HelpTerm :term="term" class="p-2" />
+    </Popper>
 </template>

client/src/components/Help/HelpTerm.vue

@@ -21,7 +21,7 @@ const { loading, hasHelp, help } = useHelpForTerm(toRef(props, "term"));
         <div v-if="loading">
             <LoadingSpan message="Loading Galaxy help terms" />
         </div>
-        <div v-else-if="hasHelp">
+        <div v-else-if="hasHelp && help">
             <ConfigurationMarkdown :markdown="help" :admin="true" />
         </div>
         <div v-else>

client/src/components/Help/HelpText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 import HelpPopover from "./HelpPopover.vue";
 
 interface Props {
@@ -10,17 +12,13 @@ interface Props {
 withDefaults(defineProps<Props>(), {
     forTitle: false,
 });
+
+const helpTarget = ref();
 </script>
 
 <template>
     <span>
-        <HelpPopover
-            :target="
-                () => {
-                    return $refs.helpTarget;
-                }
-            "
-            :term="uri" />
+        <HelpPopover :target="helpTarget" :term="uri" />
         <span ref="helpTarget" class="help-text" :class="{ 'title-help-text': forTitle }">{{ text }}</span>
     </span>
 </template>

client/src/components/Popper/Popper.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <span ref="reference">
+        <span v-if="!referenceEl" ref="reference">
             <slot name="reference" />
         </span>
         <div v-show="visible" ref="popper" class="popper-element mt-1" :class="`popper-element-${mode}`">
@@ -33,11 +33,12 @@ const props = defineProps({
     disabled: { type: Boolean, default: false },
     mode: { type: String, default: "dark" },
     placement: String as PropType<Placement>,
+    referenceEl: HTMLElement,
     title: String,
     trigger: String as PropType<Trigger>,
 });
 
-const reference = ref();
+const reference = props.referenceEl ? ref(props.referenceEl) : ref();
 const popper = ref();
 
 const { visible } = usePopper(reference, popper, {

client/src/components/Popper/usePopper.ts

@@ -40,6 +40,8 @@ export function usePopper(
         } else if (trigger === "hover") {
             addEventListener(reference.value, "mouseover", doOpen);
             addEventListener(reference.value, "mouseout", doClose);
+            addEventListener(popper.value, "mouseover", doOpen);
+            addEventListener(popper.value, "mouseout", doClose);
         }
     });