From 0adae47772aec5dd209e35181e91035fd31a9f7c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 18:21:15 +0300
Subject: [PATCH 1/4] Use popper to show help text items

---
 client/src/components/Help/HelpPopover.vue | 11 +++++------
 client/src/components/Help/HelpText.vue    | 12 +++++-------
 client/src/components/Popper/Popper.vue    |  5 +++--
 client/src/components/Popper/usePopper.ts  |  2 ++
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Help/HelpPopover.vue b/client/src/components/Help/HelpPopover.vue
index 200f76706a2b..95a30cc2d610 100644
--- a/client/src/components/Help/HelpPopover.vue
+++ b/client/src/components/Help/HelpPopover.vue
@@ -1,10 +1,9 @@
 <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;
 }
 
@@ -12,7 +11,7 @@ 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>
diff --git a/client/src/components/Help/HelpText.vue b/client/src/components/Help/HelpText.vue
index bfd54ed79b61..b35a420a7dae 100644
--- a/client/src/components/Help/HelpText.vue
+++ b/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>
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 4a6c870918da..3bd3332813b2 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/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, {
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index c5c06acdd740..aa34f7b4f94c 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/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);
         }
     });
 

From f415007ec0061367c3085621ceccf61121e7d5e9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 18:38:25 +0300
Subject: [PATCH 2/4] Fix type warning in help term wrapper

---
 client/src/components/Help/HelpTerm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Help/HelpTerm.vue b/client/src/components/Help/HelpTerm.vue
index 92db6966591d..d838bbcfb41e 100644
--- a/client/src/components/Help/HelpTerm.vue
+++ b/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>

From 8347fc55c5d65612855c49f1d6d4ee7883afa2b4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 18:47:28 +0300
Subject: [PATCH 3/4] Add margin to popper

---
 client/src/components/Popper/Popper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 3bd3332813b2..fae4b9a31915 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <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}`">
+        <div v-show="visible" ref="popper" class="popper-element m-1" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>

From eda3b0e0c8c2f181ee766f74f9eba69f286c957c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Dec 2024 13:05:30 +0300
Subject: [PATCH 4/4] Adjust margin

---
 client/src/components/Popper/Popper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index fae4b9a31915..3bd3332813b2 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <span v-if="!referenceEl" ref="reference">
             <slot name="reference" />
         </span>
-        <div v-show="visible" ref="popper" class="popper-element m-1" :class="`popper-element-${mode}`">
+        <div v-show="visible" ref="popper" class="popper-element mt-1" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>