diff --git a/src/components/FlowRunPopOver.vue b/src/components/FlowRunPopOver.vue
index 8e680ceea..1b41a5eaa 100644
--- a/src/components/FlowRunPopOver.vue
+++ b/src/components/FlowRunPopOver.vue
@@ -1,71 +1,24 @@
 <template>
-  <PPopOver ref="popover" class="flow-run-pop-over">
-    <template #target>
-      <div ref="trigger" class="flow-run-pop-over__trigger" @mouseover="open" />
+  <PPopOver class="flow-run-pop-over" group="flow-run-pop-over" auto-close :placement="placement">
+    <template #target="{ open }">
+      <div class="flow-run-pop-over__trigger" @mouseover="open" />
     </template>
 
-    <div ref="content" class="flow-run-pop-over__content">
+    <div class="flow-run-pop-over__content">
       <FlowRunPopoverContent :flow-run-id="flowRunId" />
     </div>
   </PPopOver>
 </template>
 
 <script lang="ts" setup>
-  import { PPopOver } from '@prefecthq/prefect-design'
-  import { onMounted, onUnmounted, ref } from 'vue'
+  import { PPopOver, positions } from '@prefecthq/prefect-design'
   import FlowRunPopoverContent from '@/components/FlowRunPopOverContent.vue'
 
   defineProps<{
     flowRunId: string,
   }>()
 
-  const popover = ref<InstanceType<typeof PPopOver>>()
-  const trigger = ref<HTMLDivElement>()
-  const content = ref<HTMLDivElement>()
-
-  onMounted(() => {
-    document.addEventListener('mouseover', mouseover)
-    document.addEventListener('click', click)
-  })
-
-  onUnmounted(() => {
-    document.removeEventListener('mouseover', mouseover)
-    document.removeEventListener('click', click)
-  })
-
-  function open(): void {
-    if (popover.value) {
-      popover.value.open()
-    }
-  }
-
-  function click(event: MouseEvent): void {
-    const target = event.target as HTMLElement
-
-    if (!popover.value || !content.value) {
-      return
-    }
-
-    if (content.value.contains(target)) {
-      return
-    }
-
-    popover.value.close()
-  }
-
-  function mouseover(event: MouseEvent): void {
-    const target = event.target as HTMLElement
-
-    if (!popover.value || !trigger.value) {
-      return
-    }
-
-    if (trigger.value.contains(target) || !target.classList.contains('flow-run-pop-over__trigger')) {
-      return
-    }
-
-    popover.value.close()
-  }
+  const placement = [positions.top, positions.bottom, positions.right, positions.left]
 </script>
 
 <style>
@@ -84,4 +37,9 @@
   w-full
   h-full
 }
+
+.flow-run-pop-over__content { @apply
+  p-2
+  pointer-events-none
+}
 </style>
\ No newline at end of file