diff --git a/packages/varlet-ui/src/menu-select/MenuSelect.vue b/packages/varlet-ui/src/menu-select/MenuSelect.vue
index 40e4ede4b6c..76ca18af85c 100644
--- a/packages/varlet-ui/src/menu-select/MenuSelect.vue
+++ b/packages/varlet-ui/src/menu-select/MenuSelect.vue
@@ -56,10 +56,11 @@ import { props } from './props'
 import { createNamespace, formatElevation } from '../utils/components'
 import { useMenuOptions, type MenuSelectProvider } from './provide'
 import { useSelectController } from '../select/useSelectController'
-import { type MenuOptionProvider } from '../menu-option/provide'
 import { call, preventDefault } from '@varlet/shared'
 import { useEventListener, useVModel } from '@varlet/use'
 import { focusChildElementByKey } from '../utils/elements'
+import { type MenuOptionProvider } from '../menu-option/provide'
+import { type Reference } from '../menu/usePopover'
 
 const { name, n, classes } = createNamespace('menu-select')
 
@@ -139,6 +140,11 @@ export default defineComponent({
       menu.value?.resize()
     }
 
+    // expose
+    function setReference(reference: Reference) {
+      menu.value?.setReference(reference)
+    }
+
     return {
       show,
       menu,
@@ -149,6 +155,7 @@ export default defineComponent({
       open,
       close,
       resize,
+      setReference,
     }
   },
 })
diff --git a/packages/varlet-ui/src/menu-select/docs/en-US.md b/packages/varlet-ui/src/menu-select/docs/en-US.md
index 0a49c750af9..517205b4c96 100644
--- a/packages/varlet-ui/src/menu-select/docs/en-US.md
+++ b/packages/varlet-ui/src/menu-select/docs/en-US.md
@@ -300,7 +300,7 @@ const options = ref([
 | `teleport`      | The location of the menu mount                                                                                               | _TeleportProps['to'] \| false_ | `body`            |
 | `disabled`      | Whether to disable the menu                                                                                                  | _boolean_            | `false`           |
 | `trigger`       | Menu trigger method, optional value is `click` `hover` `manual` | _string_  | `click`           |
-| `reference`       | The associated trigger element selector is used to specify specific child elements as trigger elements | _string_              | `-`           |
+| `reference` | The trigger element associated with the menu, the `string` type is the descendant element selector of the menu component, the `HTMLElement` type is any specified element node | _string \| HTMLElement_ | `-` |
 | `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_|   `true`    |
 | `same-width`    | Whether to same width as trigger element                                                                                     | _boolean_ | `false`           |
 | `popover-class` | Class of the popover                                                    | _string_             | `-`            |
@@ -361,6 +361,7 @@ const options = ref([
 | `open` | Open Menu                       | `-` | `-` |
 | `close` | Close Menu                      | `-` | `-` |
 | `resize` | This method can be called to redraw when the default slot element of Menu select changes its position and size | `-` | `-` |
+| `setReference` ***3.7.2*** | Set the trigger element associated with the menu | `reference: consistent with the reference of the component attribute` | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/menu-select/docs/zh-CN.md b/packages/varlet-ui/src/menu-select/docs/zh-CN.md
index 4a37d077ba3..d1530b51381 100644
--- a/packages/varlet-ui/src/menu-select/docs/zh-CN.md
+++ b/packages/varlet-ui/src/menu-select/docs/zh-CN.md
@@ -300,7 +300,7 @@ const options = ref([
 | `teleport`      | 菜单挂载的位置                                                     | _TeleportProps['to'] \| false_ | `body`            |
 | `disabled`      | 是否禁用菜单                                                      | _boolean_             | `false`           |
 | `trigger`       | 菜单触发方式，可选值为 `click` `hover` `manual` | _string_              | `click`           |
-| `reference`       | 菜单关联的触发元素选择器，用于指定菜单的特定子元素为触发元素 | _string_              | `-`           |
+| `reference`       | 菜单关联的触发元素，`string` 类型为菜单组件的子孙元素选择器， `HTMLElement` 类型为任意指定的元素节点 | _string \| HTMLElement_ | `-`           |
 | `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \| number \| boolean_|   `true`    |
 | `same-width`    | 是否与触发元素同宽                                                   | _boolean_             | `false`           |
 | `popover-class` | 弹出层的 class                                                    | _string_             | `-`            |
@@ -361,6 +361,7 @@ const options = ref([
 | `open` | 打开 MenuSelect | `-` | `-` |
 | `close` | 关闭 MenuSelect | `-` | `-` |
 | `resize` | MenuSelect 默认插槽元素产生位置大小变化时可以调用此方法进行重绘 | `-` | `-` |
+| `setReference` ***3.7.2*** | 设置 MenuSelect 关联的触发元素 | `reference: 与组件属性的 reference 一致` | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
index c0b588aafed..5bbff9daf04 100644
--- a/packages/varlet-ui/src/menu/Menu.vue
+++ b/packages/varlet-ui/src/menu/Menu.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    ref="host"
-    :class="classes(n(), n('$--box'))"
-    @click="handleHostClick"
-    @mouseenter="handleHostMouseenter"
-    @mouseleave="handleHostMouseleave"
-  >
+  <div ref="host" :class="classes(n(), n('$--box'))">
     <slot />
 
     <Teleport :to="teleport === false ? undefined : teleport" :disabled="teleportDisabled || teleport === false">
@@ -14,7 +8,7 @@
           ref="popover"
           :style="{
             zIndex,
-            width: sameWidth ? toSizeUnit(Math.ceil(hostSize.width)) : undefined,
+            width: sameWidth ? toSizeUnit(Math.ceil(referenceSize.width)) : undefined,
           }"
           :class="
             classes(
@@ -54,12 +48,9 @@ export default defineComponent({
     const {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -70,12 +61,14 @@ export default defineComponent({
       close,
       // expose
       resize,
+      // expose
+      setReference,
     } = usePopover(props)
 
     return {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
       teleportDisabled,
@@ -83,9 +76,6 @@ export default defineComponent({
       toSizeUnit,
       n,
       classes,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -93,6 +83,7 @@ export default defineComponent({
       resize,
       open,
       close,
+      setReference,
     }
   },
 })
diff --git a/packages/varlet-ui/src/menu/docs/en-US.md b/packages/varlet-ui/src/menu/docs/en-US.md
index ebd5616a338..1296a0cfa8b 100644
--- a/packages/varlet-ui/src/menu/docs/en-US.md
+++ b/packages/varlet-ui/src/menu/docs/en-US.md
@@ -231,6 +231,7 @@ it is recommended to wrap a `block` element.
 | `disabled`      | Whether to disable the menu                                                                                                  | _boolean_            | `false`           |
 | `trigger`       | Menu trigger method, optional value is `click` `hover` `manual`  | _string_  | `click`           |
 | `reference`       | The associated trigger element selector is used to specify specific child elements as trigger elements | _string_              | `-`           |
+| `reference` | The trigger element associated with the menu, the `string` type is the descendant element selector of the menu component, the `HTMLElement` type is any specified element node | _string \| HTMLElement_ | `-` |
 | `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_|   `true`    |
 | `same-width`    | Whether to same width as trigger element                                                                                     | _boolean_ | `false`           |
 | `default-style` | Whether to enable default styles                                                                                             | _boolean_ | `true`            |
@@ -264,11 +265,13 @@ it is recommended to wrap a `block` element.
 | `cover-right` | Right center position, overlay trigger |
 
 ### Methods
+
 | Method   | Description                     | Arguments | Return |
 | --- |---------------------------------| --- | --- |
 | `open` | Open Menu                       | `-` | `-` |
 | `close` | Close Menu                      | `-` | `-` |
 | `resize` | This method can be called to redraw when the default slot element of Menu changes its position and size | `-` | `-` |
+| `setReference` ***3.7.2*** | Set the trigger element associated with the menu | `reference: consistent with the reference of the component attribute` | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/menu/docs/zh-CN.md b/packages/varlet-ui/src/menu/docs/zh-CN.md
index 570f11b66b3..de2478d1eda 100644
--- a/packages/varlet-ui/src/menu/docs/zh-CN.md
+++ b/packages/varlet-ui/src/menu/docs/zh-CN.md
@@ -226,7 +226,7 @@ Menu 是一个 `inline-block` 元素，通过默认插槽点击时显示菜单
 | `teleport`      | 菜单挂载的位置                                                     | _TeleportProps['to'] \| false_ | `body`            |
 | `disabled`      | 是否禁用菜单                                                      | _boolean_             | `false`           |
 | `trigger`       | 菜单触发方式，可选值为 `click` `hover` `manual` | _string_              | `click`           |
-| `reference`       | 菜单关联的触发元素选择器，用于指定菜单的特定子元素为触发元素 | _string_              | `-`           |
+| `reference`       | 菜单关联的触发元素，`string` 类型为菜单组件的子孙元素选择器， `HTMLElement` 类型为任意指定的元素节点 | _string \| HTMLElement_              | `-`           |
 | `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \| number \| boolean_|   `true`    |
 | `same-width`    | 是否与触发元素同宽                                                   | _boolean_             | `false`           |
 | `default-style` | 是否启用默认样式                                                    | _boolean_             | `true`            |
@@ -260,11 +260,13 @@ Menu 是一个 `inline-block` 元素，通过默认插槽点击时显示菜单
 | `cover-right` | 右侧位置, 覆盖触发器 |
 
 ### 方法
+
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | `open` | 打开 Menu | `-` | `-` |
 | `close` | 关闭 Menu | `-` | `-` |
 | `resize` | Menu 默认插槽元素产生位置大小变化时可以调用此方法进行重绘 | `-` | `-` |
+| `setReference` ***3.7.2*** | 设置菜单关联的触发元素 | `reference: 与组件属性的 reference 一致` | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
index eb9ffe72190..258268cdb43 100644
--- a/packages/varlet-ui/src/menu/example/index.vue
+++ b/packages/varlet-ui/src/menu/example/index.vue
@@ -30,12 +30,12 @@ const placementOptions = ref([
   'cover-right',
 ])
 
+watchLang(use)
+onThemeChange()
+
 function closeMenu() {
   show.value = false
 }
-
-watchLang(use)
-onThemeChange()
 </script>
 
 <template>
diff --git a/packages/varlet-ui/src/menu/props.ts b/packages/varlet-ui/src/menu/props.ts
index f24d288bc13..507f3272911 100644
--- a/packages/varlet-ui/src/menu/props.ts
+++ b/packages/varlet-ui/src/menu/props.ts
@@ -1,5 +1,5 @@
 import { type PropType, type TeleportProps } from 'vue'
-import { type Placement, type Trigger } from './usePopover'
+import { type Placement, type Trigger, type Reference } from './usePopover'
 import { type PositioningStrategy } from '@popperjs/core'
 import { defineListenerProp } from '../utils/components'
 
@@ -10,7 +10,7 @@ export const props = {
     type: String as PropType<Trigger>,
     default: 'click',
   },
-  reference: String,
+  reference: [String, Object] as PropType<Reference>,
   placement: {
     type: String as PropType<Placement>,
     default: 'cover-top-start',
diff --git a/packages/varlet-ui/src/menu/usePopover.ts b/packages/varlet-ui/src/menu/usePopover.ts
index 583b5d07bab..f13830c60f9 100644
--- a/packages/varlet-ui/src/menu/usePopover.ts
+++ b/packages/varlet-ui/src/menu/usePopover.ts
@@ -1,8 +1,8 @@
 import flip from '@popperjs/core/lib/modifiers/flip.js'
 import offset from '@popperjs/core/lib/modifiers/offset.js'
 import computeStyles from '@popperjs/core/lib/modifiers/computeStyles.js'
-import { onWindowResize, useClickOutside, useEventListener, useVModel } from '@varlet/use'
-import { doubleRaf, getStyle, call, preventDefault } from '@varlet/shared'
+import { onWindowResize, useEventListener, useVModel } from '@varlet/use'
+import { doubleRaf, getStyle, call, preventDefault, isString } from '@varlet/shared'
 import { toPxNum } from '../utils/elements'
 import { type ListenerProp } from '../utils/components'
 import { onMounted, onUnmounted, ref, watch, type Ref } from 'vue'
@@ -20,11 +20,13 @@ export interface Position {
   distance: number
 }
 
-export interface HostSize {
+export interface ReferenceSize {
   width: number
   height: number
 }
 
+export type Reference = string | HTMLElement
+
 export type Placement =
   | NeededPopperPlacement
   | 'cover-top'
@@ -46,7 +48,7 @@ export interface UsePopoverOptions {
   disabled: boolean
   offsetX: string | number
   offsetY: string | number
-  reference?: string
+  reference?: string | HTMLElement
   closeOnClickReference?: boolean
   closeOnKeyEscape?: boolean
   onOpen?: ListenerProp<() => void>
@@ -59,7 +61,7 @@ export interface UsePopoverOptions {
 export function usePopover(options: UsePopoverOptions) {
   const host: Ref<null | HTMLElement> = ref(null)
   const popover: Ref<null | HTMLElement> = ref(null)
-  const hostSize: Ref<HostSize> = ref({ width: 0, height: 0 })
+  const referenceSize: Ref<ReferenceSize> = ref({ width: 0, height: 0 })
   const show = useVModel(options, 'show', {
     passive: true,
     defaultValue: false,
@@ -76,12 +78,11 @@ export function usePopover(options: UsePopoverOptions) {
   useStack(() => show.value, zIndex)
 
   let popoverInstance: Instance | null = null
+  let reference: Reference | undefined = undefined
   let enterPopover = false
-  let enterHost = false
+  let enterReference = false
 
   useEventListener(() => window, 'keydown', handleKeydown)
-  useClickOutside(getReference, 'click', handleClickOutside)
-  onWindowResize(resize)
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize)
   watch(() => options.disabled, close)
   watch(
@@ -93,21 +94,42 @@ export function usePopover(options: UsePopoverOptions) {
     }
   )
 
-  onMounted(() => {
-    popoverInstance = createPopper(getReference() ?? host.value!, popover.value!, getPopperOptions())
-  })
-  onUnmounted(() => {
+  onWindowResize(resize)
+  onMounted(createPopperInstance)
+  onUnmounted(destroyPopperInstance)
+
+  function createPopperInstance() {
+    const reference = getReference()!
+
+    popoverInstance = createPopper(reference, popover.value!, getPopperOptions())
+    reference.addEventListener('mouseenter', handleReferenceMouseenter)
+    reference.addEventListener('mouseleave', handleReferenceMouseleave)
+    reference.addEventListener('click', handleReferenceClick)
+    document.addEventListener('click', handleClickOutside)
+  }
+
+  function destroyPopperInstance() {
+    const reference = getReference()
+
+    if (reference) {
+      reference.removeEventListener('mouseenter', handleReferenceMouseenter)
+      reference.removeEventListener('mouseleave', handleReferenceMouseleave)
+      reference.removeEventListener('click', handleReferenceClick)
+    }
+
     popoverInstance!.destroy()
-  })
+    document.removeEventListener('click', handleClickOutside)
+  }
 
-  function computeHostSize() {
-    if (!host.value) {
+  function computeReferenceSize() {
+    const reference = getReference()
+    if (!reference) {
       return
     }
 
-    const { width, height } = getStyle(host.value)
+    const { width, height } = getStyle(reference)
 
-    hostSize.value = {
+    referenceSize.value = {
       width: toPxNum(width),
       height: toPxNum(height),
     }
@@ -153,22 +175,22 @@ export function usePopover(options: UsePopoverOptions) {
     }
   }
 
-  function handleHostMouseenter() {
+  function handleReferenceMouseenter() {
     if (options.trigger !== 'hover') {
       return
     }
 
-    enterHost = true
+    enterReference = true
 
     open()
   }
 
-  async function handleHostMouseleave() {
+  async function handleReferenceMouseleave() {
     if (options.trigger !== 'hover') {
       return
     }
 
-    enterHost = false
+    enterReference = false
 
     await doubleRaf()
 
@@ -196,14 +218,14 @@ export function usePopover(options: UsePopoverOptions) {
 
     await doubleRaf()
 
-    if (enterHost) {
+    if (enterReference) {
       return
     }
 
     close()
   }
 
-  function handleHostClick() {
+  function handleReferenceClick() {
     if (options.trigger !== 'click') {
       return
     }
@@ -216,17 +238,21 @@ export function usePopover(options: UsePopoverOptions) {
     open()
   }
 
-  function handlePopoverClose() {
-    close()
-  }
-
   function handleClickOutside(e: Event) {
-    if (options.trigger !== 'click') {
-      return
+    const reference = getReference()
+
+    if (reference && !reference.contains(e.target as Node)) {
+      if (options.trigger !== 'click') {
+        return
+      }
+
+      handlePopoverClose()
+      call(options.onClickOutside, e)
     }
+  }
 
-    handlePopoverClose()
-    call(options.onClickOutside, e)
+  function handlePopoverClose() {
+    close()
   }
 
   function handleClosed() {
@@ -237,7 +263,7 @@ export function usePopover(options: UsePopoverOptions) {
   function getPosition(): Position {
     const { offsetX, offsetY, placement } = options
 
-    computeHostSize()
+    computeReferenceSize()
 
     const offset = {
       x: toPxNum(offsetX),
@@ -249,56 +275,56 @@ export function usePopover(options: UsePopoverOptions) {
         return {
           placement: 'bottom',
           skidding: offset.x,
-          distance: offset.y - hostSize.value.height,
+          distance: offset.y - referenceSize.value.height,
         }
 
       case 'cover-top-start':
         return {
           placement: 'bottom-start',
           skidding: offset.x,
-          distance: offset.y - hostSize.value.height,
+          distance: offset.y - referenceSize.value.height,
         }
 
       case 'cover-top-end':
         return {
           placement: 'bottom-end',
           skidding: offset.x,
-          distance: offset.y - hostSize.value.height,
+          distance: offset.y - referenceSize.value.height,
         }
 
       case 'cover-bottom':
         return {
           placement: 'top',
           skidding: offset.x,
-          distance: -offset.y - hostSize.value.height,
+          distance: -offset.y - referenceSize.value.height,
         }
 
       case 'cover-bottom-start':
         return {
           placement: 'top-start',
           skidding: offset.x,
-          distance: -offset.y - hostSize.value.height,
+          distance: -offset.y - referenceSize.value.height,
         }
 
       case 'cover-bottom-end':
         return {
           placement: 'top-end',
           skidding: offset.x,
-          distance: -offset.y - hostSize.value.height,
+          distance: -offset.y - referenceSize.value.height,
         }
 
       case 'cover-left':
         return {
           placement: 'right',
           skidding: offset.y,
-          distance: offset.x - hostSize.value.width,
+          distance: offset.x - referenceSize.value.width,
         }
 
       case 'cover-right':
         return {
           placement: 'left',
           skidding: offset.y,
-          distance: -offset.x - hostSize.value.width,
+          distance: -offset.x - referenceSize.value.width,
         }
 
       case 'left':
@@ -378,7 +404,19 @@ export function usePopover(options: UsePopoverOptions) {
   }
 
   function getReference() {
-    return options.reference ? host.value!.querySelector(options.reference)! : host.value!
+    const targetReference = reference ?? options.reference ?? host.value
+
+    if (isString(targetReference)) {
+      return host.value?.querySelector(targetReference)
+    }
+
+    return targetReference
+  }
+
+  function setReference(newReference: Reference) {
+    destroyPopperInstance()
+    reference = newReference
+    createPopperInstance()
   }
 
   function handleKeydown(event: KeyboardEvent) {
@@ -415,14 +453,12 @@ export function usePopover(options: UsePopoverOptions) {
     popover,
     zIndex,
     host,
-    hostSize,
-    handleHostClick,
-    handleHostMouseenter,
-    handleHostMouseleave,
+    referenceSize,
     handlePopoverClose,
     handlePopoverMouseenter,
     handlePopoverMouseleave,
     handleClosed,
+    setReference,
     resize,
     open,
     close,
diff --git a/packages/varlet-ui/src/tooltip/Tooltip.vue b/packages/varlet-ui/src/tooltip/Tooltip.vue
index 75caf0919e5..bc369d85f59 100644
--- a/packages/varlet-ui/src/tooltip/Tooltip.vue
+++ b/packages/varlet-ui/src/tooltip/Tooltip.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    ref="host"
-    :class="classes(n(), n('$--box'))"
-    @click="handleHostClick"
-    @mouseenter="handleHostMouseenter"
-    @mouseleave="handleHostMouseleave"
-  >
+  <div ref="host" :class="classes(n(), n('$--box'))">
     <slot />
 
     <Teleport :to="teleport === false ? undefined : teleport" :disabled="teleportDisabled || teleport === false">
@@ -23,7 +17,7 @@
             :style="{
               background: color,
               color: textColor,
-              width: sameWidth ? toSizeUnit(Math.ceil(hostSize.width)) : undefined,
+              width: sameWidth ? toSizeUnit(Math.ceil(referenceSize.width)) : undefined,
             }"
             :class="classes(n('content-container'), n(`--${type}`))"
             role="tooltip"
@@ -53,12 +47,9 @@ export default defineComponent({
     const {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
-      handleHostClick,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handlePopoverClose,
@@ -69,28 +60,28 @@ export default defineComponent({
       close,
       // expose
       resize,
+      // expose
+      setReference,
     } = usePopover(props)
 
     return {
       popover,
       host,
-      hostSize,
+      referenceSize,
       show,
       zIndex,
       teleportDisabled,
       toSizeUnit,
       n,
       classes,
-      handleHostClick,
       handlePopoverClose,
-      handleHostMouseenter,
-      handleHostMouseleave,
       handlePopoverMouseenter,
       handlePopoverMouseleave,
       handleClosed,
       resize,
       open,
       close,
+      setReference,
     }
   },
 })
diff --git a/packages/varlet-ui/src/tooltip/docs/en-US.md b/packages/varlet-ui/src/tooltip/docs/en-US.md
index 0b332046cff..8a510ac8c2c 100644
--- a/packages/varlet-ui/src/tooltip/docs/en-US.md
+++ b/packages/varlet-ui/src/tooltip/docs/en-US.md
@@ -192,7 +192,7 @@ In the `disabled` state, the tooltip will not be opened.
 | `same-width`    | Whether to same width as trigger element                   | _boolean_ | `false`           |
 | `disabled` | Whether to disable the tooltip                                                      | _boolean_            | `false`   |
 | `trigger` | Tooltip trigger method, optional value is `click` `hover` `manual` | _string_  | `hover`   |
-| `reference`       | The associated trigger element selector is used to specify specific child elements as trigger elements | _string_              | `-`           |
+| `reference` | The trigger element associated with the tooltip, the `string` type is the descendant element selector of the menu component, the `HTMLElement` type is any specified element node | _string \| HTMLElement_ | `-` |
 | `close-on-click-reference` | Whether to close the menu when clicking the reference element | _boolean_ | `false` |
 | `close-on-key-escape` | Whether to support keyboard ESC to close the tooltip | _boolean_ | `true`  |
 
@@ -214,11 +214,13 @@ In the `disabled` state, the tooltip will not be opened.
 | `left-end` | Bottom left position                    |
 
 ### Methods
-| Method   | Description                     | Arguments | Return |
+
+| Method   | Description     | Arguments | Return |
 | --- |---------------------------------| --- | --- |
 | `open` | Open `Tooltip`                       | `-` | `-` |
 | `close` | Close `Tooltip`                      | `-` | `-` |
 | `resize` | This method can be called to redraw when the default slot element of `Tooltip` changes its position and size | `-` | `-` |
+| `setReference` ***3.7.2*** | Set the trigger element associated with the `Tooltip` | `reference: consistent with the reference of the component attribute` | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/tooltip/docs/zh-CN.md b/packages/varlet-ui/src/tooltip/docs/zh-CN.md
index 2543dcf5a94..4c04e75e612 100644
--- a/packages/varlet-ui/src/tooltip/docs/zh-CN.md
+++ b/packages/varlet-ui/src/tooltip/docs/zh-CN.md
@@ -191,7 +191,7 @@ import { Snackbar } from '@varlet/ui'
 | `same-width` | 是否与触发元素同宽 | _boolean_ | `false`  |
 | `disabled` | 是否禁用 Tooltip | _boolean_      | `false`   |
 | `trigger` | 触发方式，可选值为 `click` `hover` `manual` | _string_       | `hover`   |
-| `reference`       | 关联的触发元素选择器，用于指定特定子元素为触发元素 | _string_              | `-`           |
+| `reference`       | 菜单关联的触发元素，`string` 类型为菜单组件的子孙元素选择器，`HTMLElement` 类型为任意指定的元素节点 | _string \| HTMLElement_ | `-`           |
 | `close-on-click-reference` | 是否在点击菜单触发元素后关闭菜单 | _boolean_ | `false` |
 | `close-on-key-escape` | 是否支持键盘 ESC 关闭提示 | _boolean_ | `true`  |
 
@@ -219,6 +219,7 @@ import { Snackbar } from '@varlet/ui'
 | `open` | 打开 `Tooltip` | `-` | `-` |
 | `close` | 关闭 `Tooltip` | `-` | `-` |
 | `resize` | `Tooltip` 默认插槽元素产生位置大小变化时可以调用此方法进行重绘 | `-` | `-` |
+| `setReference` ***3.7.2*** | 设置 `Tooltip` 关联的触发元素 | `reference: 与组件属性的 reference 一致` | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/tooltip/props.ts b/packages/varlet-ui/src/tooltip/props.ts
index 0bcccbf2d46..16e62ad260b 100644
--- a/packages/varlet-ui/src/tooltip/props.ts
+++ b/packages/varlet-ui/src/tooltip/props.ts
@@ -1,6 +1,6 @@
 import { defineListenerProp } from '../utils/components'
 import { type PropType, type TeleportProps } from 'vue'
-import type { NeededPopperPlacement, Trigger } from '../menu/usePopover'
+import type { NeededPopperPlacement, Reference, Trigger } from '../menu/usePopover'
 import type { PositioningStrategy } from '@popperjs/core'
 
 export type Placement = NeededPopperPlacement
@@ -21,7 +21,7 @@ export const props = {
     type: String as PropType<Trigger>,
     default: 'hover',
   },
-  reference: String,
+  reference: [String, Object] as PropType<Reference>,
   placement: {
     type: String as PropType<Placement>,
     default: 'bottom',
diff --git a/packages/varlet-ui/types/menu.d.ts b/packages/varlet-ui/types/menu.d.ts
index 779111afabf..93dae3685df 100644
--- a/packages/varlet-ui/types/menu.d.ts
+++ b/packages/varlet-ui/types/menu.d.ts
@@ -22,11 +22,13 @@ export type MenuTrigger = 'click' | 'hover' | 'manual'
 
 export type MenuStrategy = PositioningStrategy
 
+export type MenuReference = string | HTMLElement
+
 export interface MenuProps extends BasicAttributes {
   show?: boolean
   disabled?: boolean
   trigger?: MenuTrigger
-  reference?: string
+  reference?: MenuReference
   placement?: MenuPlacement
   strategy?: MenuStrategy
   offsetX?: string | number
@@ -61,6 +63,8 @@ export class Menu extends VarComponent {
   close(): void
 
   resize(): void
+
+  setReference(reference: MenuReference): void
 }
 
 export class _MenuComponent extends Menu {}
diff --git a/packages/varlet-ui/types/menuSelect.d.ts b/packages/varlet-ui/types/menuSelect.d.ts
index b90989899eb..f756d57f767 100644
--- a/packages/varlet-ui/types/menuSelect.d.ts
+++ b/packages/varlet-ui/types/menuSelect.d.ts
@@ -24,6 +24,8 @@ export type MenuSelectStrategy = PositioningStrategy
 
 export type MenuSelectSize = 'normal' | 'mini' | 'small' | 'large'
 
+export type MenuSelectReference = string | HTMLElement
+
 export type MenuSelectOptionLabelRender = (option: MenuSelectOption, checked: boolean) => VNodeChild
 
 export interface MenuSelectOption {
@@ -42,7 +44,7 @@ export interface MenuSelectProps extends BasicAttributes {
   show?: boolean
   disabled?: boolean
   trigger?: MenuSelectTrigger
-  reference?: string
+  reference?: MenuSelectReference
   placement?: MenuSelectPlacement
   strategy?: MenuSelectStrategy
   offsetX?: string | number
@@ -75,6 +77,8 @@ export class MenuSelect extends VarComponent {
   close(): void
 
   resize(): void
+
+  setReference(reference: MenuSelectReference): void
 }
 
 export class _MenuSelectComponent extends MenuSelect {}
diff --git a/packages/varlet-ui/types/tooltip.d.ts b/packages/varlet-ui/types/tooltip.d.ts
index de2e842be66..8f4299bb65f 100644
--- a/packages/varlet-ui/types/tooltip.d.ts
+++ b/packages/varlet-ui/types/tooltip.d.ts
@@ -11,6 +11,8 @@ export type TooltipPlacement = TooltipNeededPopperPlacement
 
 export type TooltipTrigger = 'click' | 'hover' | 'manual'
 
+export type TooltipReference = string | HTMLElement
+
 export type TooltipType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
 
 export type TooltipStrategy = PositioningStrategy
@@ -23,7 +25,7 @@ export interface TooltipProps extends BasicAttributes {
   textColor?: string
   type?: TooltipType
   trigger?: TooltipTrigger
-  reference?: string
+  reference?: TooltipReference
   placement?: TooltipPlacement
   strategy?: TooltipStrategy
   offsetX?: string | number
@@ -55,6 +57,8 @@ export class Tooltip extends VarComponent {
   close(): void
 
   resize(): void
+
+  setReference(reference: TooltipReference): void
 }
 
 export class _TooltipComponent extends Tooltip {}
diff --git a/packages/varlet-use/src/useEventListener.ts b/packages/varlet-use/src/useEventListener.ts
index e2933d38996..96d5c3ccc39 100644
--- a/packages/varlet-use/src/useEventListener.ts
+++ b/packages/varlet-use/src/useEventListener.ts
@@ -98,6 +98,7 @@ export function useEventListener(
   onBeforeUnmount(() => {
     remove(target)
   })
+
   onDeactivated(() => {
     remove(target)
   })