diff --git a/client/src/components/BaseComponents/GPopover.test.ts b/client/src/components/BaseComponents/GPopover.test.ts
new file mode 100644
index 000000000000..03b0882d8aa0
--- /dev/null
+++ b/client/src/components/BaseComponents/GPopover.test.ts
@@ -0,0 +1,107 @@
+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");
+    });
+
+    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
new file mode 100644
index 000000000000..46e3abf10b00
--- /dev/null
+++ b/client/src/components/BaseComponents/GPopover.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+/**
+ * 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
+ * - 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 {
+    arrow,
+    autoUpdate,
+    computePosition,
+    type ComputePositionConfig,
+    flip,
+    offset,
+    type Placement,
+    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";
+
+const props = withDefaults(
+    defineProps<{
+        /**
+         * 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 */
+        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 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({
+    get: () => (props.show !== undefined ? props.show : isVisible.value),
+    set: (val: boolean) => {
+        isVisible.value = val;
+        if (props.show !== undefined) {
+            emit("update:show", val);
+        }
+    },
+});
+
+function resolveTarget(): Element | null {
+    if (!props.target) {
+        return null;
+    }
+    if (typeof props.target === "function") {
+        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 Element) {
+        return props.target;
+    }
+    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);
+}
+
+// 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;
+
+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,
+    };
+}
+
+async function updatePosition() {
+    const target = resolveTarget();
+    if (!target || !popoverEl.value) {
+        return;
+    }
+    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() {
+    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.includes("manual")) {
+        result.add("manual");
+    }
+    return result;
+});
+
+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();
+
+    if (parsedTriggers.value.has("manual")) {
+        return;
+    }
+
+    const target = resolveTarget();
+    if (!target) {
+        return;
+    }
+
+    if (parsedTriggers.value.has("hover")) {
+        const enterHandler = () => {
+            cancelHoverHide();
+            showPopover();
+        };
+        const leaveHandler = () => deferredHide();
+        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 (bridges the offset gap)
+    if (parsedTriggers.value.has("hover") && popoverEl.value) {
+        const popoverEnter = () => {
+            cancelHoverHide();
+            showPopover();
+        };
+        const popoverLeave = () => deferredHide();
+        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() {
+    cancelHoverHide();
+    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>
+    <Vue2Teleport to="body">
+        <div
+            v-show="showState"
+            ref="popoverEl"
+            class="popover b-popover"
+            :class="[customClass, `bs-popover-${basePlacement}`]"
+            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>
+    </Vue2Teleport>
+</template>
+
+<style scoped lang="scss">
+.popover {
+    position: absolute;
+    top: 0;
+    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;
+    }
+
+    // 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>
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/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/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.test.ts b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
index a3ace9f1e35f..6f607f7bd1a2 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.test.ts
@@ -5,6 +5,7 @@ import { describe, expect, it } from "vitest";
 import { STANDARD_FILE_SOURCE_TEMPLATE } from "./test_fixtures";
 
 import TemplateSummaryPopover from "./TemplateSummaryPopover.vue";
+import GPopover from "@/components/BaseComponents/GPopover.vue";
 
 const localVue = getLocalVue(true);
 
@@ -17,7 +18,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");
     });
 });
diff --git a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
index 77484b6b8c9a..a7c63d5005dd 100644
--- a/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
+++ b/client/src/components/ConfigTemplates/TemplateSummaryPopover.vue
@@ -1,10 +1,10 @@
 <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;
+    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/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/Form/Elements/FormData/FormDataExtensions.vue b/client/src/components/Form/Elements/FormData/FormDataExtensions.vue
index 1a55e500dc54..d3a3fe75b2a2 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[];
@@ -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);
     },
 });
@@ -48,16 +47,15 @@ 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"
             :show.sync="localFormatsVisible"
             placement="bottom">
             <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/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/CurrentHistory/PreferredStorePopover.vue b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
deleted file mode 100644
index 1d663171960c..000000000000
--- a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { BPopover } from "bootstrap-vue";
-import { computed } from "vue";
-
-import { useStorageLocationConfiguration } from "@/composables/storageLocation";
-
-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>
-    <BPopover :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>
-    </BPopover>
-</template>
-<style scoped lang="scss">
-.popover-wide {
-    max-width: 30rem;
-}
-</style>
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'"
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/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 b8ec1d1a9243..370dc06e991d 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -1,10 +1,10 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Organization">
-        <FontAwesomeIcon ref="button" :icon="faBuilding" />
+        <FontAwesomeIcon :id="popoverTarget" :icon="faBuilding" />
 
-        <BPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Organization">
+        <GPopover triggers="click blur" :target="popoverTarget" title="Organization">
             <GTable :items="items" :fields="fields" />
-        </BPopover>
+        </GPopover>
 
         <span v-if="name">
             <span itemprop="name">{{ name }}</span>
@@ -36,16 +36,18 @@
 <script>
 import { faBuilding, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BPopover } from "bootstrap-vue";
+
+import { useUid } from "@/composables/utils/uid";
 
 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,
@@ -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 c19a1cb986bb..94120c4276e2 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -1,10 +1,10 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
-        <FontAwesomeIcon ref="button" :icon="faUser" />
+        <FontAwesomeIcon :id="popoverTarget" :icon="faUser" />
 
-        <BPopover triggers="click blur" :target="$refs['button'] || 'works-lazily'" title="Person">
+        <GPopover triggers="click blur" :target="popoverTarget" 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,18 @@
 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 { useUid } from "@/composables/utils/uid";
 
 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,
@@ -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: [
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/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",
diff --git a/client/src/components/Tool/ToolLinkPopover.vue b/client/src/components/Tool/ToolLinkPopover.vue
index f14d5f94d744..4683507f5513 100644
--- a/client/src/components/Tool/ToolLinkPopover.vue
+++ b/client/src/components/Tool/ToolLinkPopover.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 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;
 }
@@ -17,8 +19,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: {