diff --git a/packages/ui-vue/components/popover/src/popover.component.tsx b/packages/ui-vue/components/popover/src/popover.component.tsx
index df71c9162246d000c57435d7b2e0ca8b5601b28e..f47ea7e9aa853c76bd82aae69210f7a81143545a 100644
--- a/packages/ui-vue/components/popover/src/popover.component.tsx
+++ b/packages/ui-vue/components/popover/src/popover.component.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, SetupContext } from 'vue';
+import { computed, defineComponent, ref, SetupContext, Teleport } from 'vue';
 import { PopoverProps, popoverProps } from './popover.props';
 
 import './popover.scss';
@@ -28,11 +28,13 @@ export default defineComponent({
 
         return () => {
             return (
-                <div>
-                    <div class="popover-arrow arrow"></div>
-                    {shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
-                    <div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
-                </div>
+                <Teleport to="body">
+                    <div class="popover in popover-top bs-popover-top top show">
+                        <div class="popover-arrow arrow"></div>
+                        {shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
+                        <div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
+                    </div>
+                </Teleport>
             );
         };
     }
diff --git a/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts b/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
index c353feb1ae840d86eb6a2746cecd87bb0886decd..87c0cb5b7e4342431adef73866ca062427ef9606 100644
--- a/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
+++ b/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
@@ -1,3 +1,4 @@
+import { DomEvent } from "@vue/test-utils/dist/constants/dom-events";
 import { SetupContext } from "vue";
 import { TooltipPlacement, TooltipProps } from "../tooltip.props";
 import { RectPosition, TooltipPosition } from "./types";
@@ -28,10 +29,15 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
         placementAndAlignment: TooltipPlacement,
         originalPosition: TooltipPosition,
         relativeElementRect: DOMRect,
-        tooltipRect: DOMRect
+        hostRect: DOMRect,
+        tooltipRect: DOMRect,
+        tooltipContentRect: DOMRect,
+        arrowRect: DOMRect
     ): TooltipPosition {
         let fixedLeft = originalPosition.tooltip.left;
         let fixedTop = originalPosition.tooltip.top;
+        let fixedArrowLeft = originalPosition.arrow.left;
+        let fixedArrowTop = originalPosition.arrow.top;
         const placementAndAlignmentArray = placementAndAlignment.split('-');
         const placement = placementAndAlignmentArray[0];
         if (['top', 'bottom'].includes(placement)) {
@@ -40,14 +46,24 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
             fixedLeft = overLeftBound.overBound ?
                 overLeftBound.fixedValue :
                 (overRightBound.overBound ? overRightBound.fixedValue - tooltipRect.width : originalPosition.tooltip.left);
+            fixedArrowLeft = overLeftBound.overBound ?
+                tooltipRect.width - ((fixedLeft + tooltipRect.width) - hostRect.right) - arrowRect.width :
+                (overRightBound.overBound ? hostRect.left - fixedLeft : originalPosition.arrow.left);
         }
         const overTopBound = isOverstepBoundary(relativeElementRect, 'top', originalPosition.tooltip.top);
         const overBottomBound = isOverstepBoundary(relativeElementRect, 'bottom', originalPosition.tooltip.top + tooltipRect.height);
         fixedTop = overTopBound.overBound ?
             overTopBound.fixedValue :
             (overBottomBound.overBound ? overBottomBound.fixedValue - tooltipRect.height : originalPosition.tooltip.top);
+        fixedArrowTop = overTopBound.overBound ?
+            (originalPosition.arrow.top) :
+            (overBottomBound.overBound ?
+                (
+                    tooltipRect.height - ((fixedTop + tooltipRect.height) - hostRect.top)
+                ) :
+                originalPosition.arrow.top);
         const tooltip = { left: fixedLeft, top: fixedTop };
-        const arrow = { left: originalPosition.arrow.left, top: originalPosition.arrow.top };
+        const arrow = { left: fixedArrowLeft, top: fixedArrowTop };
         return { arrow, tooltip };
     }
 
diff --git a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
index dcefbb7435bc2736b80d3816659742d7c2644350..6425f0638efc0eec38b2c890b9dead98e6c83cd2 100644
--- a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
+++ b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
@@ -14,8 +14,6 @@ export function useTooltipPosition(
     tooltipContentRect: DOMRect,
     arrowRect: DOMRect) {
 
-    const { scrollLeft, scrollTop } = document.documentElement;
-
     const placementAndAlignment = ref(props.placement);
 
     const { getRelativeElementBound } = useRelative(props, context);
@@ -34,7 +32,9 @@ export function useTooltipPosition(
         const relativeRect = getRelativeElementBound();
         placementAndAlignment.value = adjustPlacement(placementAndAlignment.value, relativeRect, hostRect, tooltipRect, arrowRect);
         const originalPosition = calculate(placementAndAlignment.value, hostRect, tooltipRect, tooltipContentRect, arrowRect);
-        const position = adjustPosition(placementAndAlignment.value, originalPosition, relativeRect, tooltipRect);
+        const position = adjustPosition(
+            placementAndAlignment.value, originalPosition, relativeRect, hostRect, tooltipRect, tooltipContentRect, arrowRect
+        );
         return position;
     });
 
diff --git a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
index 1f410bc2c81081809d6eee5624edf2400bdd1750..b0a56622938e7613731e94c1d4589551f0bec1dd 100644
--- a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
+++ b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
@@ -24,6 +24,8 @@ export default defineComponent({
             return classObject;
         });
 
+        const { scrollLeft, scrollTop } = document.documentElement;
+
         const shouldShowTooltipText = computed(() => isTextContext.value);
 
         const tooltipText = computed(() => props.content);
@@ -64,9 +66,8 @@ export default defineComponent({
                     tooltipInnerRef.value.getBoundingClientRect(),
                     arrowRef.value.getBoundingClientRect()
                 );
-                tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left}px`;
-                tooltipRightPosition.value = `${tooltipPosition.value.tooltip.right}px`;
-                tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top}px`;
+                tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left + scrollLeft}px`;
+                tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top + scrollTop}px`;
                 arrowLeftPosition.value = `${tooltipPosition.value.arrow.left}px`;
                 arrowTopPosition.value = `${tooltipPosition.value.arrow.top}px`;
                 placement.value = tooltipPlacement.value;
diff --git a/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx b/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
index 817eba7e166196df01dcd8aba6d4d2c180fdee77..fb309f0ea30b8448e770ee49e11ec78d50069a3e 100644
--- a/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
+++ b/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
@@ -43,7 +43,7 @@ const tooltipDirective = {
         element.addEventListener('mouseleave', ($event: MouseEvent) => {
             $event.stopPropagation();
             if (app) {
-                // app.unmount();
+                app.unmount();
                 app = null;
             }
         });
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index c2919daf8c1fa3086bc2f08bdb4a25ca2d2c13e8..0ae14c621d5f4b330fc88dfedbeef70ca6020079 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -16,6 +16,7 @@ import Accordion from './components/accordion.vue';
 import ComboList from './components/combo-list.vue';
 import CheckboxGroup from './components/checkbox.vue';
 import Tooltip from './components/tooltip.vue';
+import Popover from './components/popover.vue';
 
 const canEdit = ref(true);
 const disable = ref(false);
@@ -32,11 +33,7 @@ const canAutoComplete = ref(false);
         </a>
     </div>
     <HelloWorld msg="Vite + Vue" />
-    <!-- <input type="checkbox" id="checkbox" v-model="canEdit" />
-  <label for="checkbox">editable:{{ canEdit }}</label>
-  <input type="checkbox" id="checkbox" v-model="canAutoComplete" />
-  <label for="checkbox">auto complete:{{ canAutoComplete }}</label> -->
-    <!-- <ButtonEdit :editable="canEdit" :auto-complete="canAutoComplete" :enable-clear="true"></ButtonEdit> -->
+    <Popover></Popover>
     <Tooltip></Tooltip>
     <ButtonEdit></ButtonEdit>
     <Avatar></Avatar>
@@ -50,7 +47,6 @@ const canAutoComplete = ref(false);
     <ComboList />
     <RadioGroup></RadioGroup>
     <CheckboxGroup />
-
 </template>
 
 <style scoped>
diff --git a/packages/ui-vue/src/components/popover.vue b/packages/ui-vue/src/components/popover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b29014a04f482268e60be6b01ccd3e49ff514174
--- /dev/null
+++ b/packages/ui-vue/src/components/popover.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Popover from '../../components/popover/src/popover.component';
+import Button from '../../components/button/src/button.component';
+
+const popoverProps = { placement: 'bottom' };
+</script>
+
+<template>
+    <Popover :title="'This the title'"> This is popover content. </Popover>
+    <Button> hover to show popover </Button>
+</template>
diff --git a/packages/ui-vue/src/components/tooltip.vue b/packages/ui-vue/src/components/tooltip.vue
index 6ecc6606a80f8e22434901dd49a84e9ca4c78171..21d5d56c9bcc3d444a9b0417c19b68bfdea29713 100644
--- a/packages/ui-vue/src/components/tooltip.vue
+++ b/packages/ui-vue/src/components/tooltip.vue
@@ -10,12 +10,39 @@ const tooltipProps = { placement: 'bottom' };
 
     <Button v-tooltip="{ placement: 'top-right' }"> 显示提示信息 </Button>
 
-    <div id="tooltipContainer" style="width: 200px; height: 200px; background: antiquewhite; display: flex">
-        <Button
-            style="margin: auto 0 auto auto"
-            v-tooltip="{ placement: 'top-left', referenceV: '#tooltipContainer', referenceH: '#tooltipContainer' }"
-        >
-            显示提示信息
-        </Button>
+    <div>
+        <div id="tooltipContainer1" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
+            1
+            <Button
+                style="margin: auto 0 auto auto"
+                v-tooltip="{ placement: 'right', verticalRelative: '#tooltipContainer1', horizontalRelative: '#tooltipContainer1' }"
+            >
+                显示提示信息
+            </Button>
+        </div>
+        <div id="tooltipContainer2" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
+            <Button
+                style="margin: auto auto auto 0px"
+                v-tooltip="{ placement: 'left', verticalRelative: '#tooltipContainer2', horizontalRelative: '#tooltipContainer2' }"
+            >
+                显示提示信息
+            </Button>
+        </div>
+        <div id="tooltipContainer3" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
+            <Button
+                style="margin: 0px auto auto auto"
+                v-tooltip="{ placement: 'bottom', verticalRelative: '#tooltipContainer3', horizontalRelative: '#tooltipContainer3' }"
+            >
+                显示提示信息
+            </Button>
+        </div>
+        <div id="tooltipContainer4" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
+            <Button
+                style="margin: auto auto 0px auto"
+                v-tooltip="{ placement: 'top', verticalRelative: '#tooltipContainer4', horizontalRelative: '#tooltipContainer4' }"
+            >
+                显示提示信息
+            </Button>
+        </div>
     </div>
 </template>
diff --git a/packages/ui-vue/src/main.ts b/packages/ui-vue/src/main.ts
index f051ba629af7b3a8587001ad674811bb04ecb93e..27196860e9e67fa7779141d599106af138b72a0f 100644
--- a/packages/ui-vue/src/main.ts
+++ b/packages/ui-vue/src/main.ts
@@ -5,4 +5,3 @@ import Tooltip from '../components/tooltip/index';
 
 const app = createApp(App);
 app.use(Tooltip).mount('#app');
-