From 45889f322958a18fafe96b7ff0b7b260f819fff9 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 28 Feb 2026 10:40:24 -0500
Subject: [PATCH 01/14] Replace BPopover with custom GPopover component

Add GPopover as a Bootstrap-Vue-free popover using @floating-ui/dom
for positioning, following the same pattern as the existing GTooltip.
Supports hover/click/manual triggers, programmatic show/hide via
:show.sync, title and content via props or slots, placement mapping
from BPopover strings to floating-ui equivalents, and boundary
awareness via altBoundary.

Migrated all 15 files that used BPopover, including dynamic component
switching (FilterMenu, FormDataExtensions), manual trigger control
(WorkflowAttributes best practice popovers), and click+blur triggers
(SchemaOrg viewers).
---
 .../components/BaseComponents/GPopover.vue    | 342 ++++++++++++++++++
 .../common/CellStatusComponent.vue            |   7 +-
 client/src/components/Common/FilterMenu.vue   |   4 +-
 .../TemplateSummaryPopover.vue                |   8 +-
 .../Elements/FormData/FormDataExtensions.vue  |   6 +-
 .../CurrentHistory/PreferredStorePopover.vue  |   6 +-
 .../SchemaOrg/OrganizationViewer.vue          |   8 +-
 .../src/components/SchemaOrg/PersonViewer.vue |   8 +-
 client/src/components/Tool/ToolCard.vue       |   7 +-
 .../src/components/Tool/ToolLinkPopover.vue   |   5 +-
 .../ToolTargetPreferredObjectStorePopover.vue |   7 +-
 .../components/ToolsList/ToolsListCard.vue    |   7 +-
 .../src/components/Workflow/Editor/Node.vue   |   5 +-
 .../Workflow/Editor/WorkflowAttributes.vue    |  18 +-
 ...kflowTargetPreferredObjectStorePopover.vue |   7 +-
 15 files changed, 400 insertions(+), 45 deletions(-)
 create mode 100644 client/src/components/BaseComponents/GPopover.vue

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
new file mode 100644
index 000000000000..0abae00505f4
--- /dev/null
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+/**
+ * Popover component using @floating-ui/dom for positioning.
+ * Replaces BPopover from bootstrap-vue.
+ *
+ * Supports:
+ * - String target (element ID) or HTMLElement ref
+ * - Trigger modes: hover, click, manual
+ * - Placement with flip/shift
+ * - Title via prop or #title slot
+ * - Content via prop or default slot
+ * - Programmatic show/hide via v-model (:show.sync)
+ * - boundary prop (currently always uses window via altBoundary)
+ * - custom-class prop
+ */
+
+import {
+    autoUpdate,
+    computePosition,
+    type ComputePositionConfig,
+    flip,
+    offset,
+    type Placement,
+    shift,
+} from "@floating-ui/dom";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+type TriggerType = "hover" | "click" | "click blur" | "hover focus" | "manual" | "focus";
+
+const props = withDefaults(
+    defineProps<{
+        /** Element ID string or HTMLElement to anchor the popover to */
+        target?: string | HTMLElement | (() => HTMLElement | null);
+        /** Trigger mode(s) */
+        triggers?: TriggerType;
+        /** Placement relative to target */
+        placement?: string;
+        /** Boundary for positioning (currently just flags altBoundary) */
+        boundary?: string;
+        /** Title text (or use #title slot) */
+        title?: string;
+        /** Content text (or use default slot) */
+        content?: string;
+        /** Programmatic show/hide (v-model via :show.sync) */
+        show?: boolean;
+        /** Custom CSS class on the popover element */
+        customClass?: string;
+    }>(),
+    {
+        target: undefined,
+        triggers: "hover",
+        placement: "auto",
+        boundary: undefined,
+        title: undefined,
+        content: undefined,
+        show: undefined,
+        customClass: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:show", value: boolean): void;
+    (e: "shown"): void;
+    (e: "hidden"): void;
+}>();
+
+const popoverEl = ref<HTMLDivElement>();
+const isVisible = ref(false);
+
+// Two-way binding: if show prop is provided, use it; otherwise manage internally
+const showState = computed({
+    get: () => (props.show !== undefined ? props.show : isVisible.value),
+    set: (val: boolean) => {
+        isVisible.value = val;
+        if (props.show !== undefined) {
+            emit("update:show", val);
+        }
+    },
+});
+
+function resolveTarget(): HTMLElement | null {
+    if (!props.target) {
+        return null;
+    }
+    if (typeof props.target === "function") {
+        return props.target();
+    }
+    if (typeof props.target === "string") {
+        return document.getElementById(props.target);
+    }
+    if (props.target instanceof HTMLElement) {
+        return props.target;
+    }
+    // Could be a Vue ref ($refs['x']) — try .$el
+    const t = props.target as any;
+    if (t.$el) {
+        return t.$el as HTMLElement;
+    }
+    return null;
+}
+
+// Map BPopover placement strings to floating-ui Placement
+function mapPlacement(p: string): Placement {
+    const map: Record<string, Placement> = {
+        top: "top",
+        bottom: "bottom",
+        left: "left",
+        right: "right",
+        topleft: "top-start",
+        topright: "top-end",
+        bottomleft: "bottom-start",
+        bottomright: "bottom-end",
+        lefttop: "left-start",
+        leftbottom: "left-end",
+        righttop: "right-start",
+        rightbottom: "right-end",
+        auto: "bottom",
+    };
+    return map[p] || (p as Placement);
+}
+
+const popoverPosition = ref({ x: 0, y: 0 });
+let cleanupAutoUpdate: ReturnType<typeof autoUpdate> | null = null;
+
+function getConfig(): Partial<ComputePositionConfig> {
+    const useAltBoundary = props.boundary === "window";
+    return {
+        placement: mapPlacement(props.placement),
+        middleware: [
+            offset(10),
+            flip({ altBoundary: useAltBoundary }),
+            shift({ altBoundary: useAltBoundary, padding: 5 }),
+        ],
+    };
+}
+
+async function updatePosition() {
+    const target = resolveTarget();
+    if (!target || !popoverEl.value) {
+        return;
+    }
+    const { x, y } = await computePosition(target, popoverEl.value, getConfig());
+    popoverPosition.value = { x, y };
+}
+
+function showPopover() {
+    showState.value = true;
+}
+
+function hidePopover() {
+    showState.value = false;
+}
+
+function togglePopover() {
+    showState.value = !showState.value;
+}
+
+// Setup auto-update when visible
+watch(
+    () => showState.value,
+    async (visible) => {
+        cleanupAutoUpdate?.();
+        cleanupAutoUpdate = null;
+
+        if (visible) {
+            await nextTick();
+            const target = resolveTarget();
+            if (target && popoverEl.value) {
+                cleanupAutoUpdate = autoUpdate(target, popoverEl.value, updatePosition);
+            }
+            emit("shown");
+        } else {
+            emit("hidden");
+        }
+    },
+);
+
+// Watch for external show prop changes
+watch(
+    () => props.show,
+    (val) => {
+        if (val !== undefined) {
+            isVisible.value = val;
+        }
+    },
+);
+
+// Parse triggers and set up event listeners
+const parsedTriggers = computed(() => {
+    const t = props.triggers;
+    const result = new Set<string>();
+    if (t.includes("hover")) {
+        result.add("hover");
+    }
+    if (t.includes("click")) {
+        result.add("click");
+    }
+    if (t.includes("focus")) {
+        result.add("focus");
+    }
+    if (t.includes("blur")) {
+        result.add("blur");
+    }
+    if (t === "manual") {
+        result.add("manual");
+    }
+    return result;
+});
+
+let activeListeners: Array<{ el: HTMLElement; event: string; handler: (e: Event) => void }> = [];
+
+function setupListeners() {
+    teardownListeners();
+
+    if (parsedTriggers.value.has("manual")) {
+        return;
+    }
+
+    const target = resolveTarget();
+    if (!target) {
+        return;
+    }
+
+    if (parsedTriggers.value.has("hover")) {
+        const enterHandler = () => showPopover();
+        const leaveHandler = () => hidePopover();
+        target.addEventListener("mouseenter", enterHandler);
+        target.addEventListener("mouseleave", leaveHandler);
+        activeListeners.push(
+            { el: target, event: "mouseenter", handler: enterHandler },
+            { el: target, event: "mouseleave", handler: leaveHandler },
+        );
+    }
+
+    if (parsedTriggers.value.has("focus")) {
+        const focusHandler = () => showPopover();
+        const blurHandler = () => hidePopover();
+        target.addEventListener("focus", focusHandler);
+        target.addEventListener("blur", blurHandler);
+        activeListeners.push(
+            { el: target, event: "focus", handler: focusHandler },
+            { el: target, event: "blur", handler: blurHandler },
+        );
+    }
+
+    if (parsedTriggers.value.has("click")) {
+        const clickHandler = () => togglePopover();
+        target.addEventListener("click", clickHandler);
+        activeListeners.push({ el: target, event: "click", handler: clickHandler });
+
+        if (parsedTriggers.value.has("blur")) {
+            // Close on click outside
+            const outsideClickHandler = (e: Event) => {
+                if (
+                    showState.value &&
+                    !target.contains(e.target as Node) &&
+                    !popoverEl.value?.contains(e.target as Node)
+                ) {
+                    hidePopover();
+                }
+            };
+            document.addEventListener("click", outsideClickHandler, true);
+            activeListeners.push({ el: document as any, event: "click", handler: outsideClickHandler });
+        }
+    }
+
+    // Keep popover open when hovering over it
+    if (parsedTriggers.value.has("hover") && popoverEl.value) {
+        const popoverEnter = () => showPopover();
+        const popoverLeave = () => hidePopover();
+        popoverEl.value.addEventListener("mouseenter", popoverEnter);
+        popoverEl.value.addEventListener("mouseleave", popoverLeave);
+        activeListeners.push(
+            { el: popoverEl.value, event: "mouseenter", handler: popoverEnter },
+            { el: popoverEl.value, event: "mouseleave", handler: popoverLeave },
+        );
+    }
+}
+
+function teardownListeners() {
+    for (const { el, event, handler } of activeListeners) {
+        el.removeEventListener(event, handler);
+    }
+    activeListeners = [];
+}
+
+onMounted(() => {
+    // Delay setup slightly to ensure target elements are in DOM
+    nextTick(() => {
+        setupListeners();
+        if (props.show) {
+            isVisible.value = true;
+        }
+    });
+});
+
+// Re-setup listeners if target changes
+watch(
+    () => props.target,
+    () => {
+        nextTick(() => setupListeners());
+    },
+);
+
+onBeforeUnmount(() => {
+    teardownListeners();
+    cleanupAutoUpdate?.();
+});
+
+defineExpose({
+    show: showPopover,
+    hide: hidePopover,
+    toggle: togglePopover,
+});
+</script>
+
+<template>
+    <div
+        v-show="showState"
+        ref="popoverEl"
+        class="popover b-popover"
+        :class="[customClass, `bs-popover-${placement}`]"
+        role="tooltip"
+        :style="{ transform: `translate(${popoverPosition.x}px, ${popoverPosition.y}px)` }">
+        <div v-if="title || $slots.title" class="popover-header">
+            <slot name="title">{{ title }}</slot>
+        </div>
+        <div class="popover-body">
+            <slot>{{ content }}</slot>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.popover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1060;
+    max-width: 276px;
+}
+</style>
diff --git a/client/src/components/Collections/common/CellStatusComponent.vue b/client/src/components/Collections/common/CellStatusComponent.vue
index 6e5acba93e0c..09ef74c41b7e 100644
--- a/client/src/components/Collections/common/CellStatusComponent.vue
+++ b/client/src/components/Collections/common/CellStatusComponent.vue
@@ -4,12 +4,13 @@
 import { faCheck, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
-import { BPopover } from "bootstrap-vue";
 import { defineComponent } from "vue";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 export default defineComponent({
     components: {
-        BPopover,
+        GPopover,
         FontAwesomeIcon,
     },
     data() {
@@ -59,7 +60,7 @@ export default defineComponent({
 <template>
     <div :class="statusClass">
         <FontAwesomeIcon :id="id" size="2x" :icon="icon" />
-        <BPopover :target="id" title="Status" triggers="hover focus" :content="popoverContent"></BPopover>
+        <GPopover :target="id" title="Status" triggers="hover focus" :content="popoverContent"></GPopover>
     </div>
 </template>
 
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index df15bacdd3b1..b07bcf70541f 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faAngleDoubleUp, faQuestion, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover } from "bootstrap-vue";
 import { kebabCase } from "lodash";
 import { computed, ref, set } from "vue";
 
@@ -11,6 +10,7 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import FilterMenuBoolean from "@/components/Common/FilterMenuBoolean.vue";
 import FilterMenuDropdown from "@/components/Common/FilterMenuDropdown.vue";
@@ -240,7 +240,7 @@ function updateFilterText(newFilterText: string) {
         </GButton>
 
         <component
-            :is="props.view !== 'popover' ? 'div' : BPopover"
+            :is="props.view !== 'popover' ? 'div' : GPopover"
             v-if="
                 (props.view === 'popover' && toggleMenuButton) || props.menuType == 'standalone' || props.showAdvanced
             "
diff --git a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
index 77484b6b8c9a..ea00957b50ed 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { BPopover } from "bootstrap-vue";
-
 import type { TemplateSummary } from "@/api/configTemplates";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 interface Props {
     target: String;
     template: TemplateSummary;
@@ -14,8 +14,8 @@ const popoverPlacement = "rightbottom";
 </script>
 
 <template>
-    <BPopover :target="target" triggers="hover" boundary="window" :placement="popoverPlacement">
+    <GPopover :target="target" triggers="hover" boundary="window" :placement="popoverPlacement">
         <template v-slot:title>{{ props.template.name }}</template>
         <slot />
-    </BPopover>
+    </GPopover>
 </template>
diff --git a/client/src/components/Form/Elements/FormData/FormDataExtensions.vue b/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
index 1a55e500dc54..f6e81473765f 100644
--- a/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
+++ b/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { orList } from "@/utils/strings";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GCollapse from "@/components/BaseComponents/GCollapse.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 const props = defineProps<{
     extensions: string[];
@@ -48,7 +48,7 @@ const localFormatsVisible = computed({
             <FontAwesomeIcon v-if="formatsVisible" :icon="faCaretUp" />
             <FontAwesomeIcon v-else :icon="faCaretDown" />
         </GButton>
-        <BPopover
+        <GPopover
             v-if="props.popover"
             v-model="localFormatsVisible"
             :target="props.formatsButtonId"
@@ -57,7 +57,7 @@ const localFormatsVisible = computed({
             <ul class="pl-3 m-0">
                 <li v-for="extension in props.extensions" :key="extension">{{ extension }}</li>
             </ul>
-        </BPopover>
+        </GPopover>
         <GCollapse v-else :visible="localFormatsVisible">
             <ul class="pl-3 m-0">
                 <li v-for="extension in props.extensions" :key="extension">{{ extension }}</li>
diff --git a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
index 1d663171960c..f3cbaa745d7e 100644
--- a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
+++ b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { BPopover } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import ShowSelectedObjectStore from "@/components/ObjectStore/ShowSelectedObjectStore.vue";
 
 const { isOnlyPreference } = useStorageLocationConfiguration();
@@ -34,7 +34,7 @@ const title = computed(() => {
 </script>
 
 <template>
-    <BPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft" boundary="window">
+    <GPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>{{ title }}</template>
         <div class="popover-wide">
             <p>
@@ -58,7 +58,7 @@ const title = computed(() => {
                 :preferred-object-store-id="preferredObjectStoreId"
                 for-what="Galaxy will default to storing this history's datasets in " />
         </div>
-    </BPopover>
+    </GPopover>
 </template>
 <style scoped lang="scss">
 .popover-wide {
diff --git a/client/src/components/SchemaOrg/OrganizationViewer.vue b/client/src/components/SchemaOrg/OrganizationViewer.vue
index b8ec1d1a9243..0487605f5335 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -2,9 +2,9 @@
     <span itemprop="creator" itemscope itemtype="https://schema.org/Organization">
         <FontAwesomeIcon ref="button" :icon="faBuilding" />
 
-        <BPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Organization">
+        <GPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Organization">
             <GTable :items="items" :fields="fields" />
-        </BPopover>
+        </GPopover>
 
         <span v-if="name">
             <span itemprop="name">{{ name }}</span>
@@ -36,16 +36,16 @@
 <script>
 import { faBuilding, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover } from "bootstrap-vue";
 
 import ThingViewerMixin from "./ThingViewerMixin";
 
 import GLink from "@/components/BaseComponents/GLink.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BPopover,
+        GPopover,
         FontAwesomeIcon,
         GLink,
         GTable,
diff --git a/client/src/components/SchemaOrg/PersonViewer.vue b/client/src/components/SchemaOrg/PersonViewer.vue
index c19a1cb986bb..eff26bd805bf 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -2,9 +2,9 @@
     <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
         <FontAwesomeIcon ref="button" :icon="faUser" />
 
-        <BPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Person">
+        <GPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Person">
             <GTable :items="items" :fields="fields" />
-        </BPopover>
+        </GPopover>
 
         <span v-if="name">
             <meta v-if="person.name" itemprop="name" :content="person.name" />
@@ -50,16 +50,16 @@
 import { faOrcid } from "@fortawesome/free-brands-svg-icons";
 import { faExternalLinkAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover } from "bootstrap-vue";
 
 import ThingViewerMixin from "./ThingViewerMixin";
 
 import GLink from "@/components/BaseComponents/GLink.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BPopover,
+        GPopover,
         FontAwesomeIcon,
         GLink,
         GTable,
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 09559c8f9671..cc46cf108e04 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { faExclamationCircle, faHdd, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BPopover } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
@@ -14,6 +14,7 @@ import { useUserStore } from "@/stores/userStore";
 import GButton from "../BaseComponents/GButton.vue";
 import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
 import GModal from "../BaseComponents/GModal.vue";
+import GPopover from "../BaseComponents/GPopover.vue";
 import ToolCredentials from "./ToolCredentials.vue";
 import ToolHelpForum from "./ToolHelpForum.vue";
 import ToolSelectPreferredObjectStore from "./ToolSelectPreferredObjectStore.vue";
@@ -239,7 +240,7 @@ onBeforeMount(() => {
                     Requires credentials to run this tool.
 
                     <FontAwesomeIcon id="target" :icon="faExclamationCircle" fixed-width />
-                    <BPopover target="target" triggers="hover" boundary="window">
+                    <GPopover target="target" triggers="hover" boundary="window">
                         <div class="d-flex flex-column">
                             <span
                                 v-for="(service, index) in props.options.credentials"
@@ -249,7 +250,7 @@ onBeforeMount(() => {
                                 {{ service.description }}
                             </span>
                         </div>
-                    </BPopover>
+                    </GPopover>
                 </BAlert>
             </template>
 
diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
index f14d5f94d744..35d9179cef38 100644
--- a/client/src/components/Tool/ToolLinkPopover.vue
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ToolLink from "./ToolLink.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 interface ToolLinkPopoverProps {
     target: string | Function;
@@ -17,8 +18,8 @@ const boundary = "window";
 </script>
 
 <template>
-    <b-popover v-if="toolId" :boundary="boundary" :target="target" triggers="hover">
+    <GPopover v-if="toolId" :boundary="boundary" :target="target" triggers="hover">
         Tool:
         <ToolLink :tool-id="toolId" :tool-version="toolVersion || 'latest'" />
-    </b-popover>
+    </GPopover>
 </template>
diff --git a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
index dd33240416fc..4110abaa5c9f 100644
--- a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
+++ b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-popover target="tool-storage" triggers="hover" placement="bottomleft" boundary="window">
+    <GPopover target="tool-storage" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>{{ title }}</template>
         <div class="popover-wide">
             <p v-if="toolPreferredObjectStoreId">
@@ -19,13 +19,16 @@
                 Change {{ preferredOrEmptyString }} Galaxy storage by clicking on the storage button in the tool header.
             </div>
         </div>
-    </b-popover>
+    </GPopover>
 </template>
 
 <script>
 import showTargetPopoverMixin from "@/components/ObjectStore/showTargetPopoverMixin";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 export default {
+    components: { GPopover },
     mixins: [showTargetPopoverMixin],
     props: {
         toolPreferredObjectStoreId: {
diff --git a/client/src/components/ToolsList/ToolsListCard.vue b/client/src/components/ToolsList/ToolsListCard.vue
index bbad9f31919a..feb6d48e3a1a 100644
--- a/client/src/components/ToolsList/ToolsListCard.vue
+++ b/client/src/components/ToolsList/ToolsListCard.vue
@@ -13,7 +13,7 @@ import {
     faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover, BSkeleton } from "bootstrap-vue";
+import { BSkeleton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -26,6 +26,7 @@ import type { CardBadge } from "../Common/GCard.types";
 import { useToolsListCardActions } from "./useToolsListCardActions";
 
 import GButton from "../BaseComponents/GButton.vue";
+import GPopover from "../BaseComponents/GPopover.vue";
 import GCard from "../Common/GCard.vue";
 import ToolHelp from "../Tool/ToolHelp.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
@@ -344,7 +345,7 @@ const {
                 @click="showPopover = !showPopover">
                 <FontAwesomeIcon :icon="faInfoCircle" fixed-width />
             </GButton>
-            <BPopover
+            <GPopover
                 v-if="props.version || !props.workflowCompatible"
                 :show.sync="showPopover"
                 custom-class="tool-info-popover"
@@ -360,7 +361,7 @@ const {
                         Not Workflow compatible
                     </div>
                 </div>
-            </BPopover>
+            </GPopover>
         </template>
 
         <template v-slot:description>
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index f844dacacc67..d10650c19ddf 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -66,7 +66,7 @@
                     aria-label="tool recommendations">
                     <i class="fa fa-arrow-right" />
                 </b-button>
-                <b-popover
+                <GPopover
                     v-if="isEnabled && !readonly"
                     :target="popoverId"
                     triggers="hover"
@@ -79,7 +79,7 @@
                             :datatypes-mapper="datatypesMapper"
                             @onCreate="onCreate" />
                     </div>
-                </b-popover>
+                </GPopover>
             </b-button-group>
             <i :class="iconClass" />
             <span v-if="step.when" v-g-tooltip.hover title="This step is conditionally executed.">
@@ -188,6 +188,7 @@ import { isWorkflowInput } from "../constants";
 import { ToggleStepSelectedAction } from "./Actions/stepActions";
 import type { OutputTerminals } from "./modules/terminals";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DraggableWrapper from "@/components/Workflow/Editor/DraggablePan.vue";
 import NodeInput from "@/components/Workflow/Editor/NodeInput.vue";
diff --git a/client/src/components/Workflow/Editor/WorkflowAttributes.vue b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
index 251b444f6bb8..46c45ffe2cfb 100644
--- a/client/src/components/Workflow/Editor/WorkflowAttributes.vue
+++ b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
@@ -47,7 +47,7 @@
                 This short description will be visible when this workflow is viewed and should be limited to a sentence
                 or two.
             </div>
-            <b-popover
+            <GPopover
                 custom-class="best-practice-popover"
                 target="workflow-annotation"
                 boundary="window"
@@ -56,12 +56,12 @@
                 triggers="manual"
                 title="Best Practice"
                 :content="annotationBestPracticeMessage">
-            </b-popover>
+            </GPopover>
         </div>
         <div id="workflow-license-area" class="mt-2" :class="{ 'highlight-attribute': highlight === 'license' }">
             <b>License</b>
             <LicenseSelector id="license-selector" :input-license="license" @onLicense="onLicense" />
-            <b-popover
+            <GPopover
                 custom-class="best-practice-popover"
                 target="license-selector"
                 boundary="window"
@@ -70,12 +70,12 @@
                 triggers="manual"
                 title="Best Practice"
                 :content="bestPracticeWarningLicense">
-            </b-popover>
+            </GPopover>
         </div>
         <div id="workflow-creator-area" class="mt-2" :class="{ 'highlight-attribute': highlight === 'creator' }">
             <b>Creator</b>
             <CreatorEditor id="creator-editor" :creators="creatorAsList" @onCreators="onCreator" />
-            <b-popover
+            <GPopover
                 custom-class="best-practice-popover"
                 target="creator-editor"
                 boundary="window"
@@ -84,7 +84,7 @@
                 triggers="manual"
                 title="Best Practice"
                 :content="bestPracticeWarningCreator">
-            </b-popover>
+            </GPopover>
         </div>
 
         <div id="workflow-doi-area" class="mt-2">
@@ -120,7 +120,7 @@
                 A detailed description of what the workflow does. It is best to include descriptions of what kinds of
                 data are required. Researchers looking for the workflow will see this text. Markdown is enabled.
             </div>
-            <b-popover
+            <GPopover
                 custom-class="best-practice-popover"
                 target="workflow-readme"
                 boundary="window"
@@ -129,7 +129,7 @@
                 triggers="manual"
                 title="Best Practice"
                 :content="bestPracticeWarningReadme">
-            </b-popover>
+            </GPopover>
         </div>
         <div class="mt-2">
             <b>Help</b>
@@ -166,6 +166,7 @@ import { UntypedParameters } from "./modules/parameters";
 
 import WorkflowVersionSelector from "../WorkflowVersionSelector.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import ItemListEditor from "@/components/Common/ItemListEditor.vue";
 import LicenseSelector from "@/components/License/LicenseSelector.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
@@ -177,6 +178,7 @@ const BEST_PRACTICE_HIGHLIGHT_TIME = 4000;
 export default {
     name: "WorkflowAttributes",
     components: {
+        GPopover,
         StatelessTags,
         LicenseSelector,
         CreatorEditor,
diff --git a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
index 3e2931ba5b4b..f4e07b69dfae 100644
--- a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
+++ b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-popover :target="target" triggers="hover" placement="bottomleft" boundary="window">
+    <GPopover :target="target" triggers="hover" placement="bottomleft" boundary="window">
         <template v-slot:title>{{ title }}</template>
         <div class="popover-wide">
             <p v-if="invocationPreferredObjectStoreId">Galaxy Storage has been set at the invocation level.</p>
@@ -17,13 +17,16 @@
                 header.
             </div>
         </div>
-    </b-popover>
+    </GPopover>
 </template>
 
 <script>
 import showTargetPopoverMixin from "@/components/ObjectStore/showTargetPopoverMixin";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 export default {
+    components: { GPopover },
     mixins: [showTargetPopoverMixin],
     props: {
         invocationPreferredObjectStoreId: {

From aac055a6e41185b692fe7aef1584170c4e40af38 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 28 Feb 2026 16:05:55 -0500
Subject: [PATCH 02/14] Fix TemplateSummaryPopover test for GPopover

Find GPopover component directly instead of by BPopover name, and
check the target via props() instead of attributes() since GPopover
doesn't render the target as a DOM attribute.
---
 client/src/components/BaseComponents/GPopover.vue           | 3 +++
 .../ConfigTemplates/TemplateSummaryPopover.test.ts          | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 0abae00505f4..836d1b6d2deb 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -3,6 +3,9 @@
  * Popover component using @floating-ui/dom for positioning.
  * Replaces BPopover from bootstrap-vue.
  *
+ * NOTE: Uses Bootstrap CSS class names (popover, b-popover, popover-header, popover-body)
+ * for styling compatibility. Replace with custom g-popover styles when dropping Bootstrap CSS.
+ *
  * Supports:
  * - String target (element ID) or HTMLElement ref
  * - Trigger modes: hover, click, manual
diff --git a/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
index a3ace9f1e35f..09488522de44 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
@@ -2,6 +2,8 @@ import { getLocalVue } from "@tests/vitest/helpers";
 import { shallowMount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 import { STANDARD_FILE_SOURCE_TEMPLATE } from "./test_fixtures";
 
 import TemplateSummaryPopover from "./TemplateSummaryPopover.vue";
@@ -17,7 +19,7 @@ describe("TemplateSummaryPopover", () => {
             },
             localVue,
         });
-        const popover = wrapper.findComponent({ name: "BPopover" });
-        expect(popover.attributes().target).toEqual("popover-target");
+        const popover = wrapper.findComponent(GPopover);
+        expect(popover.props("target")).toEqual("popover-target");
     });
 });

From d95e40af084290f357567cd9898b9944128453cc Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Mar 2026 18:57:17 -0500
Subject: [PATCH 03/14] Fix import order in TemplateSummaryPopover test

---
 .../components/ConfigTemplates/TemplateSummaryPopover.test.ts  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
index 09488522de44..6f607f7bd1a2 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
@@ -2,11 +2,10 @@ import { getLocalVue } from "@tests/vitest/helpers";
 import { shallowMount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import GPopover from "@/components/BaseComponents/GPopover.vue";
-
 import { STANDARD_FILE_SOURCE_TEMPLATE } from "./test_fixtures";
 
 import TemplateSummaryPopover from "./TemplateSummaryPopover.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 const localVue = getLocalVue(true);
 

From eaeb5c1bdd0669cd87ada28bde53a32f8cb7b6ae Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Mar 2026 19:50:31 -0500
Subject: [PATCH 04/14] Fix TypeScript types in GPopover and callers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Widen target prop from HTMLElement to Element (floating-ui accepts Element,
and FontAwesomeIcon renders SVG). Allow function targets to return any value
matching BPopover's behavior — resolveTarget handles Vue component instances
via . unwrapping. Fix String -> string in three TemplateSummaryPopover wrappers.
---
 .../components/BaseComponents/GPopover.vue    | 34 +++++++++++++------
 .../TemplateSummaryPopover.vue                |  2 +-
 .../Templates/TemplateSummaryPopover.vue      |  2 +-
 .../Templates/TemplateSummaryPopover.vue      |  2 +-
 .../src/components/Tool/ToolLinkPopover.vue   |  3 +-
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 836d1b6d2deb..06054d294079 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -32,8 +32,14 @@ type TriggerType = "hover" | "click" | "click blur" | "hover focus" | "manual" |
 
 const props = withDefaults(
     defineProps<{
-        /** Element ID string or HTMLElement to anchor the popover to */
-        target?: string | HTMLElement | (() => HTMLElement | null);
+        /**
+         * Element ID string, Element ref, or function returning an element to anchor the popover to.
+         * Function return type is intentionally broad (any) to match BPopover's behavior — callers
+         * may pass `() => $refs.x` which can return a Vue component instance; resolveTarget handles
+         * unwrapping via .$el.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        target?: string | Element | (() => any);
         /** Trigger mode(s) */
         triggers?: TriggerType;
         /** Placement relative to target */
@@ -81,24 +87,30 @@ const showState = computed({
     },
 });
 
-function resolveTarget(): HTMLElement | null {
+function resolveTarget(): Element | null {
     if (!props.target) {
         return null;
     }
     if (typeof props.target === "function") {
-        return props.target();
+        const result = props.target();
+        if (!result) {
+            return null;
+        }
+        if (result instanceof Element) {
+            return result;
+        }
+        // Vue component instance — try .$el
+        if (result.$el instanceof Element) {
+            return result.$el;
+        }
+        return null;
     }
     if (typeof props.target === "string") {
         return document.getElementById(props.target);
     }
-    if (props.target instanceof HTMLElement) {
+    if (props.target instanceof Element) {
         return props.target;
     }
-    // Could be a Vue ref ($refs['x']) — try .$el
-    const t = props.target as any;
-    if (t.$el) {
-        return t.$el as HTMLElement;
-    }
     return null;
 }
 
@@ -210,7 +222,7 @@ const parsedTriggers = computed(() => {
     return result;
 });
 
-let activeListeners: Array<{ el: HTMLElement; event: string; handler: (e: Event) => void }> = [];
+let activeListeners: Array<{ el: Element; event: string; handler: (e: Event) => void }> = [];
 
 function setupListeners() {
     teardownListeners();
diff --git a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
index ea00957b50ed..a7c63d5005dd 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
@@ -4,7 +4,7 @@ import type { TemplateSummary } from "@/api/configTemplates";
 import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 interface Props {
-    target: String;
+    target: string;
     template: TemplateSummary;
 }
 
diff --git a/client/src/components/FileSources/Templates/TemplateSummaryPopover.vue b/client/src/components/FileSources/Templates/TemplateSummaryPopover.vue
index c056e03d9b72..9465b85434ff 100644
--- a/client/src/components/FileSources/Templates/TemplateSummaryPopover.vue
+++ b/client/src/components/FileSources/Templates/TemplateSummaryPopover.vue
@@ -5,7 +5,7 @@ import TemplateSummary from "./TemplateSummary.vue";
 import TemplateSummaryPopover from "@/components/ConfigTemplates/TemplateSummaryPopover.vue";
 
 interface Props {
-    target: String;
+    target: string;
     template: FileSourceTemplateSummary;
 }
 
diff --git a/client/src/components/ObjectStore/Templates/TemplateSummaryPopover.vue b/client/src/components/ObjectStore/Templates/TemplateSummaryPopover.vue
index df9f9b5f05f1..458af2e6a16e 100644
--- a/client/src/components/ObjectStore/Templates/TemplateSummaryPopover.vue
+++ b/client/src/components/ObjectStore/Templates/TemplateSummaryPopover.vue
@@ -5,7 +5,7 @@ import TemplateSummary from "./TemplateSummary.vue";
 import TemplateSummaryPopover from "@/components/ConfigTemplates/TemplateSummaryPopover.vue";
 
 interface Props {
-    target: String;
+    target: string;
     template: ObjectStoreTemplateSummary;
 }
 
diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
index 35d9179cef38..4683507f5513 100644
--- a/client/src/components/Tool/ToolLinkPopover.vue
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -3,7 +3,8 @@ import ToolLink from "./ToolLink.vue";
 import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 interface ToolLinkPopoverProps {
-    target: string | Function;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    target: string | (() => any);
     toolId?: string;
     toolVersion?: string;
 }

From af289c9f1d37d9b5be013ab5ffa9627cb26d14ff Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 26 Mar 2026 20:06:36 -0400
Subject: [PATCH 05/14] Add arrow and fix hover gap for GPopover

Adds the Floating UI arrow() middleware so the popover renders a CSS
arrow pointing at its reference element, matching the old BPopover
behavior. Uses Bootstrap 4's .arrow class for styling compatibility.

Also fixes the hover gap problem where moving the mouse from trigger to
popover would close it -- the 10px offset created a dead zone. Now uses
a 100ms deferred hide that gets cancelled if the mouse enters the
popover in time. Tracks actualPlacement from Floating UI so the arrow
direction stays correct when the popover flips.
---
 .../components/BaseComponents/GPopover.vue    | 68 +++++++++++++++----
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 06054d294079..e1e74403e805 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -18,6 +18,7 @@
  */
 
 import {
+    arrow,
     autoUpdate,
     computePosition,
     type ComputePositionConfig,
@@ -74,7 +75,9 @@ const emit = defineEmits<{
 }>();
 
 const popoverEl = ref<HTMLDivElement>();
+const arrowEl = ref<HTMLDivElement>();
 const isVisible = ref(false);
+const actualPlacement = ref<Placement>("bottom");
 
 // Two-way binding: if show prop is provided, use it; otherwise manage internally
 const showState = computed({
@@ -135,17 +138,22 @@ function mapPlacement(p: string): Placement {
 }
 
 const popoverPosition = ref({ x: 0, y: 0 });
+const arrowPosition = ref<{ x?: number; y?: number }>({});
 let cleanupAutoUpdate: ReturnType<typeof autoUpdate> | null = null;
 
 function getConfig(): Partial<ComputePositionConfig> {
     const useAltBoundary = props.boundary === "window";
+    const middleware = [
+        offset(10),
+        flip({ altBoundary: useAltBoundary }),
+        shift({ altBoundary: useAltBoundary, padding: 5 }),
+    ];
+    if (arrowEl.value) {
+        middleware.push(arrow({ element: arrowEl.value }));
+    }
     return {
         placement: mapPlacement(props.placement),
-        middleware: [
-            offset(10),
-            flip({ altBoundary: useAltBoundary }),
-            shift({ altBoundary: useAltBoundary, padding: 5 }),
-        ],
+        middleware,
     };
 }
 
@@ -154,8 +162,12 @@ async function updatePosition() {
     if (!target || !popoverEl.value) {
         return;
     }
-    const { x, y } = await computePosition(target, popoverEl.value, getConfig());
-    popoverPosition.value = { x, y };
+    const result = await computePosition(target, popoverEl.value, getConfig());
+    popoverPosition.value = { x: result.x, y: result.y };
+    actualPlacement.value = result.placement;
+    if (result.middlewareData.arrow) {
+        arrowPosition.value = { x: result.middlewareData.arrow.x, y: result.middlewareData.arrow.y };
+    }
 }
 
 function showPopover() {
@@ -223,6 +235,22 @@ const parsedTriggers = computed(() => {
 });
 
 let activeListeners: Array<{ el: Element; event: string; handler: (e: Event) => void }> = [];
+let hoverHideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function cancelHoverHide() {
+    if (hoverHideTimeout !== null) {
+        clearTimeout(hoverHideTimeout);
+        hoverHideTimeout = null;
+    }
+}
+
+function deferredHide() {
+    cancelHoverHide();
+    hoverHideTimeout = setTimeout(() => {
+        hidePopover();
+        hoverHideTimeout = null;
+    }, 100);
+}
 
 function setupListeners() {
     teardownListeners();
@@ -237,8 +265,11 @@ function setupListeners() {
     }
 
     if (parsedTriggers.value.has("hover")) {
-        const enterHandler = () => showPopover();
-        const leaveHandler = () => hidePopover();
+        const enterHandler = () => {
+            cancelHoverHide();
+            showPopover();
+        };
+        const leaveHandler = () => deferredHide();
         target.addEventListener("mouseenter", enterHandler);
         target.addEventListener("mouseleave", leaveHandler);
         activeListeners.push(
@@ -279,10 +310,13 @@ function setupListeners() {
         }
     }
 
-    // Keep popover open when hovering over it
+    // Keep popover open when hovering over it (bridges the offset gap)
     if (parsedTriggers.value.has("hover") && popoverEl.value) {
-        const popoverEnter = () => showPopover();
-        const popoverLeave = () => hidePopover();
+        const popoverEnter = () => {
+            cancelHoverHide();
+            showPopover();
+        };
+        const popoverLeave = () => deferredHide();
         popoverEl.value.addEventListener("mouseenter", popoverEnter);
         popoverEl.value.addEventListener("mouseleave", popoverLeave);
         activeListeners.push(
@@ -293,6 +327,7 @@ function setupListeners() {
 }
 
 function teardownListeners() {
+    cancelHoverHide();
     for (const { el, event, handler } of activeListeners) {
         el.removeEventListener(event, handler);
     }
@@ -334,9 +369,16 @@ defineExpose({
         v-show="showState"
         ref="popoverEl"
         class="popover b-popover"
-        :class="[customClass, `bs-popover-${placement}`]"
+        :class="[customClass, `bs-popover-${actualPlacement}`]"
         role="tooltip"
         :style="{ transform: `translate(${popoverPosition.x}px, ${popoverPosition.y}px)` }">
+        <div
+            ref="arrowEl"
+            class="arrow"
+            :style="{
+                left: arrowPosition.x != null ? `${arrowPosition.x}px` : '',
+                top: arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+            }" />
         <div v-if="title || $slots.title" class="popover-header">
             <slot name="title">{{ title }}</slot>
         </div>

From 9e9a605c91915e85883a32d320a3301b3f15c48d Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 5 Apr 2026 21:01:43 -0400
Subject: [PATCH 06/14] Teleport GPopover to body to escape ancestor CSS
 constraints

BPopover rendered at body level, so the global .popover { max-width: 70% }
rule resolved against the viewport. GPopover was rendering inline, which
meant inside narrow containers like the ActivityPanel the effective width
shrank to ~210px, crushing tables and other wide content.
---
 .../components/BaseComponents/GPopover.vue    | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index e1e74403e805..02513144d894 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -365,27 +365,29 @@ defineExpose({
 </script>
 
 <template>
-    <div
-        v-show="showState"
-        ref="popoverEl"
-        class="popover b-popover"
-        :class="[customClass, `bs-popover-${actualPlacement}`]"
-        role="tooltip"
-        :style="{ transform: `translate(${popoverPosition.x}px, ${popoverPosition.y}px)` }">
+    <Teleport to="body">
         <div
-            ref="arrowEl"
-            class="arrow"
-            :style="{
-                left: arrowPosition.x != null ? `${arrowPosition.x}px` : '',
-                top: arrowPosition.y != null ? `${arrowPosition.y}px` : '',
-            }" />
-        <div v-if="title || $slots.title" class="popover-header">
-            <slot name="title">{{ title }}</slot>
+            v-show="showState"
+            ref="popoverEl"
+            class="popover b-popover"
+            :class="[customClass, `bs-popover-${actualPlacement}`]"
+            role="tooltip"
+            :style="{ transform: `translate(${popoverPosition.x}px, ${popoverPosition.y}px)` }">
+            <div
+                ref="arrowEl"
+                class="arrow"
+                :style="{
+                    left: arrowPosition.x != null ? `${arrowPosition.x}px` : '',
+                    top: arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+                }" />
+            <div v-if="title || $slots.title" class="popover-header">
+                <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="popover-body">
+                <slot>{{ content }}</slot>
+            </div>
         </div>
-        <div class="popover-body">
-            <slot>{{ content }}</slot>
-        </div>
-    </div>
+    </Teleport>
 </template>
 
 <style scoped lang="scss">

From 35fb7f8e274c7f0b90369423913d38f69138349d Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 5 Apr 2026 21:01:51 -0400
Subject: [PATCH 07/14] Remove redundant v-model from FormDataExtensions
 GPopover

GPopover uses update:show (bound via :show.sync), not update:modelValue,
so the v-model binding was a no-op. Also removed a stale commented-out emit.
---
 .../components/Form/Elements/FormData/FormDataExtensions.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormDataExtensions.vue b/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
index f6e81473765f..d3a3fe75b2a2 100644
--- a/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
+++ b/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
@@ -25,7 +25,6 @@ const emit = defineEmits<{
 const localFormatsVisible = computed({
     get: () => props.formatsVisible,
     set: (value: boolean) => {
-        // emit("update:show-modal", value);
         emit("update:formats-visible", value);
     },
 });
@@ -50,7 +49,6 @@ const localFormatsVisible = computed({
         </GButton>
         <GPopover
             v-if="props.popover"
-            v-model="localFormatsVisible"
             :target="props.formatsButtonId"
             :show.sync="localFormatsVisible"
             placement="bottom">

From fe7206e65379653fdf8fd2999dd9c4b15daee3ec Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 18 Apr 2026 12:25:19 -0400
Subject: [PATCH 08/14] Remove unused PreferredStorePopover.vue

Noticed during PR review -- the component had no references anywhere in
the codebase. It got picked up in the GPopover migration since it was
still checked in, but it's dead code.
---
 .../CurrentHistory/PreferredStorePopover.vue  | 67 -------------------
 1 file changed, 67 deletions(-)
 delete mode 100644 client/src/components/History/CurrentHistory/PreferredStorePopover.vue

diff --git a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
deleted file mode 100644
index f3cbaa745d7e..000000000000
--- a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-import { useStorageLocationConfiguration } from "@/composables/storageLocation";
-
-import GPopover from "@/components/BaseComponents/GPopover.vue";
-import ShowSelectedObjectStore from "@/components/ObjectStore/ShowSelectedObjectStore.vue";
-
-const { isOnlyPreference } = useStorageLocationConfiguration();
-
-interface Props {
-    historyId: string;
-    historyPreferredObjectStoreId?: string;
-    user: { preferred_object_store_id?: string | null };
-}
-
-const props = defineProps<Props>();
-
-const preferredObjectStoreId = computed(() => {
-    let id = props.historyPreferredObjectStoreId;
-    if (!id) {
-        id = props.user.preferred_object_store_id ?? undefined;
-    }
-    return id;
-});
-
-const title = computed(() => {
-    if (isOnlyPreference.value) {
-        return "Preferred Storage";
-    } else {
-        return "Storage";
-    }
-});
-</script>
-
-<template>
-    <GPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft" boundary="window">
-        <template v-slot:title>{{ title }}</template>
-        <div class="popover-wide">
-            <p>
-                <b
-                    >This option only affects new datasets created in this history. Existing history datasets will
-                    remain at their current storage.</b
-                >
-            </p>
-
-            <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited">
-                This storage has been set at the history level.
-            </p>
-            <p v-else class="history-preferred-object-store-not-inherited">
-                This storage has been inherited from your user preferences (set in
-                <router-link to="/user">User -> Preferences</router-link> -> {{ title }}). If that option is updated,
-                this history will target that new default.
-            </p>
-
-            <ShowSelectedObjectStore
-                v-if="preferredObjectStoreId"
-                :preferred-object-store-id="preferredObjectStoreId"
-                for-what="Galaxy will default to storing this history's datasets in " />
-        </div>
-    </GPopover>
-</template>
-<style scoped lang="scss">
-.popover-wide {
-    max-width: 30rem;
-}
-</style>

From 2e88b4bd1e5b9febc911551372fbe428290252c9 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 25 May 2026 08:50:03 -0400
Subject: [PATCH 09/14] Migrate remaining BPopover call sites in
 StorageOperations and WorkflowExtractionMessages

Catches up the sweep with files added on dev after the branch was cut --
mostly davelopez's StorageOperations batch plus a TODO in
WorkflowExtractionMessages that was waiting on GPopover. Same drop-in
swap as the others.

Also broadens GPopover's TriggerType to accept the 'manual hover'
combination BPopover supports (used by HistoryStorageOperationsIndicator
for proactive auto-show with hover backup).
---
 client/src/components/BaseComponents/GPopover.vue        | 4 ++--
 client/src/components/Common/DatasetPopoverLink.vue      | 6 +++---
 .../HistoryStorageOperationsIndicator.vue                | 7 ++++---
 .../StorageOperationOutcomeProgress.vue                  | 8 +++++---
 .../WorkflowExtraction/WorkflowExtractionMessages.vue    | 9 ++++-----
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 02513144d894..f0ebcb33b812 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -29,7 +29,7 @@ import {
 } from "@floating-ui/dom";
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-type TriggerType = "hover" | "click" | "click blur" | "hover focus" | "manual" | "focus";
+type TriggerType = "hover" | "click" | "click blur" | "hover focus" | "manual" | "manual hover" | "focus";
 
 const props = withDefaults(
     defineProps<{
@@ -228,7 +228,7 @@ const parsedTriggers = computed(() => {
     if (t.includes("blur")) {
         result.add("blur");
     }
-    if (t === "manual") {
+    if (t.includes("manual")) {
         result.add("manual");
     }
     return result;
diff --git a/client/src/components/Common/DatasetPopoverLink.vue b/client/src/components/Common/DatasetPopoverLink.vue
index 7c0b28dbfbbf..40a86db034df 100644
--- a/client/src/components/Common/DatasetPopoverLink.vue
+++ b/client/src/components/Common/DatasetPopoverLink.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { BPopover } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useDatasetStore } from "@/stores/datasetStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 import DatasetInformation from "@/components/DatasetInformation/DatasetInformation.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -48,7 +48,7 @@ async function ensureDatasetDetails() {
             {{ datasetId }}
         </router-link>
 
-        <BPopover :target="targetId" triggers="hover focus" boundary="window" placement="right">
+        <GPopover :target="targetId" triggers="hover focus" boundary="window" placement="right">
             <div class="dataset-details-popover">
                 <div v-if="loading">
                     <LoadingSpan :message="localize('Loading dataset details')" />
@@ -60,7 +60,7 @@ async function ensureDatasetDetails() {
                     <DatasetInformation :dataset="details" />
                 </div>
             </div>
-        </BPopover>
+        </GPopover>
     </div>
 </template>
 
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryStorageOperationsIndicator.vue b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryStorageOperationsIndicator.vue
index f2ea8d0f0759..8f1814df8fdf 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryStorageOperationsIndicator.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryStorageOperationsIndicator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BLink, BPopover } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onUnmounted, ref, watch } from "vue";
 
@@ -11,6 +11,7 @@ import localize from "@/utils/localization";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 interface Props {
     historyId: string;
@@ -76,7 +77,7 @@ function onDoNotShowAgain() {
             </GButton>
         </GButtonGroup>
 
-        <BPopover
+        <GPopover
             :show.sync="isStorageHelperVisible"
             :target="storageOperationsButtonId"
             triggers="manual hover"
@@ -86,6 +87,6 @@ function onDoNotShowAgain() {
                 <span>{{ localize("Background operations are running. Click this spinner to open status.") }}</span>
                 <BLink @click="onDoNotShowAgain">{{ localize("Do not show this again") }}</BLink>
             </div>
-        </BPopover>
+        </GPopover>
     </div>
 </template>
diff --git a/client/src/components/History/StorageOperations/StorageOperationOutcomeProgress.vue b/client/src/components/History/StorageOperations/StorageOperationOutcomeProgress.vue
index 4309b687df6c..ad82eba51272 100644
--- a/client/src/components/History/StorageOperations/StorageOperationOutcomeProgress.vue
+++ b/client/src/components/History/StorageOperations/StorageOperationOutcomeProgress.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { BPopover, BProgress, BProgressBar } from "bootstrap-vue";
+import { BProgress, BProgressBar } from "bootstrap-vue";
 import { computed } from "vue";
 
 import localize from "@/utils/localization";
 
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
 type ProgressHeightClass = "storage-operation-progress-sm" | "storage-operation-progress-md";
 
 interface Props {
@@ -67,7 +69,7 @@ const popoverTargetId = `storage-operation-progress-${Math.random().toString(36)
             </BProgress>
         </div>
 
-        <BPopover
+        <GPopover
             v-if="props.showDetails"
             :target="popoverTargetId"
             triggers="hover focus"
@@ -88,7 +90,7 @@ const popoverTargetId = `storage-operation-progress-${Math.random().toString(36)
                     {{ props.totalCount }} ({{ progressPercent }}%)
                 </div>
             </div>
-        </BPopover>
+        </GPopover>
     </div>
 </template>
 
diff --git a/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue b/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
index 76798ccd70c4..6d969902875f 100644
--- a/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
+++ b/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BPopover } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { ref } from "vue";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 const props = defineProps<{
     warnings: string[];
@@ -12,8 +13,6 @@ const props = defineProps<{
 
 const showWarningsPopover = ref(false);
 const warningsContext = ref<"alert" | "popover">("alert");
-
-// TODO: Replace with GPopover when that is implemented
 </script>
 
 <template>
@@ -35,7 +34,7 @@ const warningsContext = ref<"alert" | "popover">("alert");
                 @click="showWarningsPopover = !showWarningsPopover">
                 <FontAwesomeIcon :icon="faExclamationTriangle" fixed-width />
             </GButton>
-            <BPopover
+            <GPopover
                 v-if="props.warnings.length && warningsContext === 'popover'"
                 :show.sync="showWarningsPopover"
                 boundary="window"
@@ -45,7 +44,7 @@ const warningsContext = ref<"alert" | "popover">("alert");
                 <div class="d-flex flex-column flex-gapy-1 text-center">
                     <div v-for="(warning, index) in props.warnings" :key="index">{{ warning }}</div>
                 </div>
-            </BPopover>
+            </GPopover>
         </div>
         <BAlert
             v-if="props.warnings.length && warningsContext === 'alert'"

From 0ee44b989e3d711b009d5047a22e9b7d8c070b85 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 29 Jul 2026 19:51:44 -0400
Subject: [PATCH 10/14] Fix GPopover arrow placement class

The arrow wasn't drawing a triangle on most call sites. The template emitted
`bs-popover-${actualPlacement}` straight from floating-ui, so it produced things
like bs-popover-bottom-start, but Bootstrap only defines .bs-popover-top,
-right, -bottom and -left and hangs every arrow triangle rule off those four.
The aligned variants matched no rule at all, so the .arrow div rendered with no
borders on it. Six of the thirteen placements in the codebase are compound BV
strings (bottomleft, topleft, rightbottom) that map to -start/-end, so the arrow
was silently missing on all of them -- including both object store popovers and
FilterMenu's popover view. Collapsing the class to its base side brings it back.

Also zeroed Bootstrap's horizontal margin on .arrow. The arrow middleware
already centers it on the reference element, and the inherited margin was
shifting it back off-center by the popover border radius.
---
 .../BaseComponents/GPopover.test.ts           | 98 +++++++++++++++++++
 .../components/BaseComponents/GPopover.vue    | 13 ++-
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/BaseComponents/GPopover.test.ts

diff --git a/client/src/components/BaseComponents/GPopover.test.ts b/client/src/components/BaseComponents/GPopover.test.ts
new file mode 100644
index 000000000000..ec87c0290d13
--- /dev/null
+++ b/client/src/components/BaseComponents/GPopover.test.ts
@@ -0,0 +1,98 @@
+import { mount, type Wrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type Vue from "vue";
+
+import GPopover from "./GPopover.vue";
+
+// happy-dom gives every element a zero-sized rect, so whatever placement floating-ui would
+// really resolve to here is meaningless. Pin it and assert on what the component does with it.
+const resolved = vi.hoisted(() => ({ placement: "bottom" }));
+
+vi.mock("@floating-ui/dom", () => ({
+    computePosition: () =>
+        Promise.resolve({
+            x: 0,
+            y: 0,
+            placement: resolved.placement,
+            middlewareData: { arrow: { x: 8 } },
+        }),
+    autoUpdate: (_reference: unknown, _floating: unknown, update: () => void) => {
+        update();
+        return () => {};
+    },
+    arrow: () => ({ name: "arrow", fn: () => ({}) }),
+    flip: () => ({ name: "flip", fn: () => ({}) }),
+    offset: () => ({ name: "offset", fn: () => ({}) }),
+    shift: () => ({ name: "shift", fn: () => ({}) }),
+}));
+
+let wrapper: Wrapper<Vue> | undefined;
+
+// Queried off the document rather than the wrapper subtree so these stay valid whichever
+// container the popover ends up rendering into.
+function popoverEl() {
+    const el = document.body.querySelector(".popover");
+    if (!el) {
+        throw new Error("popover element not found");
+    }
+    return el;
+}
+
+async function showPopover(placement: string, resolvedPlacement: string) {
+    resolved.placement = resolvedPlacement;
+
+    const target = document.createElement("button");
+    target.id = "trigger";
+    document.body.appendChild(target);
+
+    wrapper = mount(GPopover as object, {
+        attachTo: document.body,
+        propsData: { target: "trigger", placement, show: false },
+        slots: { default: "body content" },
+    });
+
+    // Positioning only kicks in when `show` transitions, so toggle rather than mounting shown.
+    await wrapper.setProps({ show: true });
+
+    // The arrow offset is the only signal that computePosition has actually resolved; the
+    // placement class already holds a default before then.
+    await vi.waitFor(() => {
+        if (!popoverEl().querySelector(".arrow")?.getAttribute("style")?.includes("left")) {
+            throw new Error("popover not positioned yet");
+        }
+    });
+}
+
+describe("GPopover", () => {
+    afterEach(() => {
+        wrapper?.destroy();
+        wrapper = undefined;
+        document.body.innerHTML = "";
+    });
+
+    it.each([
+        ["bottomleft", "bottom-start", "bs-popover-bottom"],
+        ["topleft", "top-start", "bs-popover-top"],
+        ["rightbottom", "right-end", "bs-popover-right"],
+        ["bottom", "bottom", "bs-popover-bottom"],
+        ["right", "right", "bs-popover-right"],
+    ])("placement %s resolving to %s gets the %s arrow class", async (placement, resolvedPlacement, expectedClass) => {
+        await showPopover(placement, resolvedPlacement);
+
+        // Bootstrap only defines arrow styling for the four base sides, so an aligned
+        // placement still has to map onto its base side or the arrow renders untriangled.
+        expect([...popoverEl().classList]).toContain(expectedClass);
+    });
+
+    it("does not emit an aligned placement class Bootstrap has no rule for", async () => {
+        await showPopover("bottomleft", "bottom-start");
+
+        expect([...popoverEl().classList]).not.toContain("bs-popover-bottom-start");
+    });
+
+    it("positions the arrow along the popover edge", async () => {
+        await showPopover("bottom", "bottom");
+
+        expect(popoverEl().querySelector(".arrow")?.getAttribute("style")).toContain("left: 8px");
+    });
+});
diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index f0ebcb33b812..3fca06eca1db 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -137,6 +137,11 @@ function mapPlacement(p: string): Placement {
     return map[p] || (p as Placement);
 }
 
+// Bootstrap only defines .bs-popover-top/-right/-bottom/-left, and every arrow triangle rule
+// hangs off those four, so an aligned floating-ui placement has to collapse to its base side --
+// "bs-popover-bottom-start" matches no rule and leaves the arrow untriangled.
+const basePlacement = computed(() => actualPlacement.value.split("-")[0]);
+
 const popoverPosition = ref({ x: 0, y: 0 });
 const arrowPosition = ref<{ x?: number; y?: number }>({});
 let cleanupAutoUpdate: ReturnType<typeof autoUpdate> | null = null;
@@ -370,7 +375,7 @@ defineExpose({
             v-show="showState"
             ref="popoverEl"
             class="popover b-popover"
-            :class="[customClass, `bs-popover-${actualPlacement}`]"
+            :class="[customClass, `bs-popover-${basePlacement}`]"
             role="tooltip"
             :style="{ transform: `translate(${popoverPosition.x}px, ${popoverPosition.y}px)` }">
             <div
@@ -397,5 +402,11 @@ defineExpose({
     left: 0;
     z-index: 1060;
     max-width: 276px;
+
+    .arrow {
+        // The arrow middleware already centers this on the reference element, so Bootstrap's
+        // horizontal margin would just shift it back off-center.
+        margin: 0;
+    }
 }
 </style>

From d5b07b6e91c7ef259839ff1755a3688a478ed93a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 30 Jul 2026 15:41:13 -0400
Subject: [PATCH 11/14] Actually teleport GPopover instead of rendering a dead
 <Teleport> tag

Vue 2.7 has no built-in Teleport, and it doesn't warn about one either -- the
bare <Teleport to="body"> was just an unknown element, so the popover rendered
inside it, inline, still subject to every ancestor overflow, transform and
stacking context it was supposed to escape. Swapped it for Vue2Teleport, which
the repo already depends on and already uses in HeadlessMultiselect, and added
a test asserting the popover ends up a direct child of body.

Confirmed in a browser against the workflow editor: six popovers now sit
directly under body and there are no leftover <teleport> elements in the DOM.
---
 client/src/components/BaseComponents/GPopover.test.ts | 9 +++++++++
 client/src/components/BaseComponents/GPopover.vue     | 8 ++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/BaseComponents/GPopover.test.ts b/client/src/components/BaseComponents/GPopover.test.ts
index ec87c0290d13..03b0882d8aa0 100644
--- a/client/src/components/BaseComponents/GPopover.test.ts
+++ b/client/src/components/BaseComponents/GPopover.test.ts
@@ -95,4 +95,13 @@ describe("GPopover", () => {
 
         expect(popoverEl().querySelector(".arrow")?.getAttribute("style")).toContain("left: 8px");
     });
+
+    it("relocates the popover to the document body", async () => {
+        await showPopover("bottom", "bottom");
+
+        // Vue 2.7 has no built-in Teleport, so a bare <Teleport> leaves the popover nested in an
+        // unknown element and still subject to ancestor clipping. Being a direct child of body is
+        // the whole point of the escape hatch.
+        expect(popoverEl().parentElement).toBe(document.body);
+    });
 });
diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 3fca06eca1db..94828fa35048 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -28,6 +28,10 @@ import {
     shift,
 } from "@floating-ui/dom";
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+// Vue 2.7 has no built-in Teleport -- a bare <Teleport> silently renders as an unknown element
+// and the popover stays put, trapped by whatever ancestor clipping it was meant to escape.
+// @ts-ignore missing types
+import Vue2Teleport from "vue2-teleport";
 
 type TriggerType = "hover" | "click" | "click blur" | "hover focus" | "manual" | "manual hover" | "focus";
 
@@ -370,7 +374,7 @@ defineExpose({
 </script>
 
 <template>
-    <Teleport to="body">
+    <Vue2Teleport to="body">
         <div
             v-show="showState"
             ref="popoverEl"
@@ -392,7 +396,7 @@ defineExpose({
                 <slot>{{ content }}</slot>
             </div>
         </div>
-    </Teleport>
+    </Vue2Teleport>
 </template>
 
 <style scoped lang="scss">

From 087b3b0c081d35f75eca2cfc6527911cd2583adf Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 30 Jul 2026 21:57:23 -0400
Subject: [PATCH 12/14] Anchor creator popovers to an element id instead of a
 template ref

PersonViewer and OrganizationViewer were passing
`$refs['button'] || 'works-lazily'` as the popover target. $refs is empty
during the first render, so the target was the junk string, and since Vue 2's
$refs isn't reactive nothing ever re-triggered resolution -- the popover
couldn't open at all until some unrelated change forced the component to
re-render. The hack predates the GPopover migration and it's the reason
clicking the person or organization icon in the workflow editor so often did
nothing.

Give each icon a page-unique id from useUid and target that instead, which is
how the other eleven GPopover call sites already work. Tests cover both
viewers: the target has to resolve to an element that's really in the document,
and two instances have to get distinct ids, since a workflow can list several
creators.

Verified in the workflow editor -- both popovers now open on the first click
with no re-render.
---
 .../SchemaOrg/CreatorViewers.test.ts          | 59 +++++++++++++++++++
 .../SchemaOrg/OrganizationViewer.vue          |  9 ++-
 .../src/components/SchemaOrg/PersonViewer.vue |  9 ++-
 3 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/SchemaOrg/CreatorViewers.test.ts

diff --git a/client/src/components/SchemaOrg/CreatorViewers.test.ts b/client/src/components/SchemaOrg/CreatorViewers.test.ts
new file mode 100644
index 000000000000..08d38aa52ca2
--- /dev/null
+++ b/client/src/components/SchemaOrg/CreatorViewers.test.ts
@@ -0,0 +1,59 @@
+import { mount, type Wrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import type Vue from "vue";
+
+import OrganizationViewer from "./OrganizationViewer.vue";
+import PersonViewer from "./PersonViewer.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
+
+let wrapper: Wrapper<Vue> | undefined;
+
+const CASES = [
+    {
+        name: "PersonViewer",
+        component: PersonViewer,
+        propsData: { person: { givenName: "Ada", familyName: "Lovelace", email: "ada@example.org" } },
+        prefix: "person-viewer-",
+    },
+    {
+        name: "OrganizationViewer",
+        component: OrganizationViewer,
+        propsData: { organization: { name: "Example Institute", email: "info@example.org" } },
+        prefix: "organization-viewer-",
+    },
+];
+
+describe.each(CASES)("$name", ({ component, propsData, prefix }) => {
+    afterEach(() => {
+        wrapper?.destroy();
+        wrapper = undefined;
+        document.body.innerHTML = "";
+    });
+
+    it("anchors its popover to an element that is actually in the document", () => {
+        wrapper = mount(component as object, { attachTo: document.body, propsData });
+
+        const target = wrapper.findComponent(GPopover).props("target");
+
+        // Regression guard. These viewers used to pass `$refs['button'] || 'works-lazily'`, but
+        // $refs is empty on first render and is not reactive, so the target stayed the junk
+        // string and the popover could never open until something else forced a re-render.
+        expect(target).toEqual(expect.stringContaining(prefix));
+        expect(document.getElementById(target)).not.toBeNull();
+    });
+
+    it("gives each instance a distinct popover target", () => {
+        const first = mount(component as object, { attachTo: document.body, propsData });
+        const second = mount(component as object, { attachTo: document.body, propsData });
+
+        const firstTarget = first.findComponent(GPopover).props("target");
+        const secondTarget = second.findComponent(GPopover).props("target");
+
+        // A workflow can list several creators, and duplicate ids would make every popover
+        // resolve to whichever icon happened to be first in the document.
+        expect(firstTarget).not.toEqual(secondTarget);
+
+        first.destroy();
+        second.destroy();
+    });
+});
diff --git a/client/src/components/SchemaOrg/OrganizationViewer.vue b/client/src/components/SchemaOrg/OrganizationViewer.vue
index 0487605f5335..370dc06e991d 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -1,8 +1,8 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Organization">
-        <FontAwesomeIcon ref="button" :icon="faBuilding" />
+        <FontAwesomeIcon :id="popoverTarget" :icon="faBuilding" />
 
-        <GPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Organization">
+        <GPopover triggers="click blur" :target="popoverTarget" title="Organization">
             <GTable :items="items" :fields="fields" />
         </GPopover>
 
@@ -37,6 +37,8 @@
 import { faBuilding, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+import { useUid } from "@/composables/utils/uid";
+
 import ThingViewerMixin from "./ThingViewerMixin";
 
 import GLink from "@/components/BaseComponents/GLink.vue";
@@ -60,6 +62,9 @@ export default {
         return {
             faBuilding,
             faExternalLinkAlt,
+            // An element id rather than a template ref: $refs is empty on first render and isn't
+            // reactive, so a ref-based target never resolves until something re-renders.
+            popoverTarget: useUid("organization-viewer-").value,
             implicitMicrodataProperties: ["name", "email", "url", "identifier"],
             thing: this.organization,
             fields: [
diff --git a/client/src/components/SchemaOrg/PersonViewer.vue b/client/src/components/SchemaOrg/PersonViewer.vue
index eff26bd805bf..94120c4276e2 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -1,8 +1,8 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
-        <FontAwesomeIcon ref="button" :icon="faUser" />
+        <FontAwesomeIcon :id="popoverTarget" :icon="faUser" />
 
-        <GPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Person">
+        <GPopover triggers="click blur" :target="popoverTarget" title="Person">
             <GTable :items="items" :fields="fields" />
         </GPopover>
 
@@ -51,6 +51,8 @@ import { faOrcid } from "@fortawesome/free-brands-svg-icons";
 import { faExternalLinkAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+import { useUid } from "@/composables/utils/uid";
+
 import ThingViewerMixin from "./ThingViewerMixin";
 
 import GLink from "@/components/BaseComponents/GLink.vue";
@@ -75,6 +77,9 @@ export default {
             faOrcid,
             faUser,
             faExternalLinkAlt,
+            // An element id rather than a template ref: $refs is empty on first render and isn't
+            // reactive, so a ref-based target never resolves until something re-renders.
+            popoverTarget: useUid("person-viewer-").value,
             implicitMicrodataProperties: ["name", "givenName", "email", "familyName", "url", "identifier"],
             thing: this.person,
             fields: [

From 95bab0b46be2d98ef3b83568bae110fa02e394b5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 31 Jul 2026 12:05:00 -0400
Subject: [PATCH 13/14] Stop GTable collapsing the popover it is rendered in

Clicking a creator in the workflow editor gave you a 70px-wide popover with a
290px table spilling out of it. The cause is that GTable sets
container-type: inline-size so it can drive its own container queries, and
inline-size containment makes an element's width independent of its contents --
so the table reported no intrinsic width at all. The popover is shrink-to-fit,
so the only thing left contributing any width was the title, and everything
else overflowed. Measured with max-content, the whole popover asked for 70px.

Opting out of containment inside a popover gets the box back to a sensible
276px, and letting long unbroken values wrap brings the table down to 250px so
it fits with room to spare instead of overflowing by 14px. Both are needed --
the wrap alone leaves the box at 70px and makes it 1033px tall.

The tradeoff is that GTable's responsive stacked layout won't kick in inside a
popover, which seems like the right call: a popover is already a small fixed
box and the stacked layout is meant for genuinely narrow viewports.

No unit test -- happy-dom doesn't apply SFC styles, so getComputedStyle returns
nothing and there's nothing for vitest to assert on. Verified by measuring the
live workflow editor: person and organization popovers both 276px wide with a
250px table, no overflow, no horizontal scroll, no clipped cells, and text-only
popovers unchanged at 250px.
---
 .../src/components/BaseComponents/GPopover.vue   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/client/src/components/BaseComponents/GPopover.vue b/client/src/components/BaseComponents/GPopover.vue
index 94828fa35048..46e3abf10b00 100644
--- a/client/src/components/BaseComponents/GPopover.vue
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -412,5 +412,21 @@ defineExpose({
         // horizontal margin would just shift it back off-center.
         margin: 0;
     }
+
+    // GTable declares inline-size containment so it can drive its own container queries. That
+    // makes its width independent of its contents, so it reports no intrinsic width at all --
+    // and this box is shrink-to-fit, so it would collapse to the width of the title while the
+    // table spilled out the side. Opt out of containment, and let long unbroken values like
+    // email addresses wrap so the table still fits within max-width.
+    :deep(.g-table-container) {
+        container-type: normal;
+    }
+
+    :deep(.g-table) {
+        th,
+        td {
+            overflow-wrap: anywhere;
+        }
+    }
 }
 </style>

From a44af6a87a0da896cd5f2f83eace3304dfffd3be Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 14 Aug 2026 21:10:12 -0400
Subject: [PATCH 14/14] Drop the bootstrap-vue warning suppression from the
 ToolForm test

The comment above it said PersonViewer uses a BPopover that doesn't work in the
test environment, which stopped being true once this branch migrated
PersonViewer and OrganizationViewer to GPopover. Checked whether the
suppression was still load-bearing by neutralising it and running the suite --
all four tests still pass, and vitest-fail-on-console would have caught any
warning it was hiding. So the call goes too, not just the stale comment.

The helper itself stays; three other test files still use it.
---
 client/src/components/Tool/ToolForm.test.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
index 9af05c3cbd09..f057e54b9c3d 100644
--- a/client/src/components/Tool/ToolForm.test.js
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -1,7 +1,7 @@
 import "@tests/vitest/mockHelpPopovers";
 
 import { getFakeRegisteredUser } from "@tests/test-data";
-import { getLocalVue, injectTestRouter, suppressBootstrapVueWarnings } from "@tests/vitest/helpers";
+import { getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
@@ -69,11 +69,6 @@ describe("ToolForm", () => {
             }),
         );
 
-        // the PersonViewer component uses a BPopover that doesn't work in the test environment. It would be
-        // better to break PersonViewer and OrganizationViewer out into smaller subcomponents and just
-        // stub out the Popover piece.
-        suppressBootstrapVueWarnings();
-
         wrapper = mount(ToolForm, {
             propsData: {
                 id: "tool_id",