diff --git a/docs/examples/popover/directive-usage.vue b/docs/examples/popover/directive-usage.vue
index bad1fc162d..bff6fd6ec6 100644
--- a/docs/examples/popover/directive-usage.vue
+++ b/docs/examples/popover/directive-usage.vue
@@ -15,11 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref } from 'vue'
+import { ref } from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus'
 
-const popoverRef = ref()
+import type { PopoverInstance } from 'element-plus'
+
+const popoverRef = ref<PopoverInstance>()
 const onClickOutside = () => {
-  unref(popoverRef).popperRef?.delayHide?.()
+  popoverRef.value?.hide()
 }
 </script>
diff --git a/docs/examples/popover/virtual-triggering.vue b/docs/examples/popover/virtual-triggering.vue
index a2b6f21222..cc3c7f750b 100644
--- a/docs/examples/popover/virtual-triggering.vue
+++ b/docs/examples/popover/virtual-triggering.vue
@@ -15,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref } from 'vue'
+import { ref } from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus'
 
+import type { PopoverInstance } from 'element-plus'
+
 const buttonRef = ref()
-const popoverRef = ref()
+const popoverRef = ref<PopoverInstance>()
 const onClickOutside = () => {
-  unref(popoverRef).popperRef?.delayHide?.()
+  popoverRef.value?.hide()
 }
 </script>