From b00e07f13df34fa528d6349e0172845c37ab8906 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 1 Jul 2025 15:19:35 +0200
Subject: [PATCH] feat(Popover): add `reference` prop

---
 .../examples/popover/PopoverCursorExample.vue | 43 +++++++++++++++++++
 docs/content/3.components/popover.md          | 10 +++++
 docs/content/3.components/tooltip.md          |  4 --
 src/runtime/components/Popover.vue            | 10 ++++-
 src/runtime/components/Tooltip.vue            |  5 +++
 5 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 docs/app/components/content/examples/popover/PopoverCursorExample.vue

diff --git a/docs/app/components/content/examples/popover/PopoverCursorExample.vue b/docs/app/components/content/examples/popover/PopoverCursorExample.vue
new file mode 100644
index 00000000..9cbf5be8
--- /dev/null
+++ b/docs/app/components/content/examples/popover/PopoverCursorExample.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const open = ref(false)
+const anchor = ref({ x: 0, y: 0 })
+
+const reference = computed(() => ({
+  getBoundingClientRect: () =>
+    ({
+      width: 0,
+      height: 0,
+      left: anchor.value.x,
+      right: anchor.value.x,
+      top: anchor.value.y,
+      bottom: anchor.value.y,
+      ...anchor.value
+    } as DOMRect)
+}))
+</script>
+
+<template>
+  <UPopover
+    :open="open"
+    :reference="reference"
+    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
+  >
+    <div
+      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
+      @pointerenter="open = true"
+      @pointerleave="open = false"
+      @pointermove="(ev) => {
+        anchor.x = ev.clientX
+        anchor.y = ev.clientY
+      }"
+    >
+      Hover me
+    </div>
+
+    <template #content>
+      <div class="p-4">
+        {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/content/3.components/popover.md b/docs/content/3.components/popover.md
index f89d0ef8..95d647ca 100644
--- a/docs/content/3.components/popover.md
+++ b/docs/content/3.components/popover.md
@@ -202,6 +202,16 @@ name: 'popover-command-palette-example'
 ---
 ::
 
+### With following cursor :badge{label="Soon" class="align-text-top"}
+
+You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
+
+::component-example
+---
+name: 'popover-cursor-example'
+---
+::
+
 ### With anchor slot
 
 You can use the `#anchor` slot to position the Popover against a custom element.
diff --git a/docs/content/3.components/tooltip.md b/docs/content/3.components/tooltip.md
index 1b46ffb3..ed2c3016 100644
--- a/docs/content/3.components/tooltip.md
+++ b/docs/content/3.components/tooltip.md
@@ -196,10 +196,6 @@ name: 'tooltip-cursor-example'
 ---
 ::
 
-::note
-This example is based on Reka UI's [Tooltip Cursor](https://reka-ui.com/examples/tooltip-cursor) example.
-::
-
 ## API
 
 ### Props
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 7ee33376..2d88a4a3 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps, HoverCardTriggerProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/popover'
 import type { EmitsToProps, ComponentConfig } from '../types/utils'
@@ -27,6 +27,12 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * The reference (or anchor) element that is being referred to for positioning.
+   *
+   * If not provided will use the current component as anchor.
+   */
+  reference?: HoverCardTriggerProps['reference']
   /**
    * When `false`, the popover will not close when clicking outside or pressing escape.
    * @defaultValue true
@@ -100,7 +106,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 
 <template>
   <Component.Root v-slot="{ open }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+    <Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 1595681b..2fa332cc 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -27,6 +27,11 @@ export interface TooltipProps extends TooltipRootProps {
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * The reference (or anchor) element that is being referred to for positioning.
+   *
+   * If not provided will use the current component as anchor.
+   */
   reference?: TooltipTriggerProps['reference']
   class?: any
   ui?: Tooltip['slots']