diff --git a/devui/popover/src/popover.scss b/devui/popover/src/popover.scss
index 3c6a1f10e3ba2f77b9bced976732600de215eb85..175657b0f5ce800af2978981ebc1bd8aa07c3cfa 100644
--- a/devui/popover/src/popover.scss
+++ b/devui/popover/src/popover.scss
@@ -3,42 +3,27 @@
 @import '../../style//theme/font';
 @import '../../style//theme//animation';
 
+$devui-popover-margin: -8px;
+$devui-popover-width: -6px;
+$devui-popover-offset: 8px;
+
 @mixin some-display {
   display: inline-flex;
 }
 
 .devui-popover {
-  --devui-popover-margin: -8px;
-  --devui-popover-width: -6px;
-  --devui-popover-offset: 8px;
-
   position: relative;
   @include some-display;
 
-  .after {
-    content: '';
-    width: 12px;
-    display: none;
-    height: 12px;
-    transform: rotate(45deg);
-    position: absolute;
-    background-color: $devui-feedback-overlay-bg;
-  }
-
   &.devui-popover-isVisible {
     .devui-popover-content {
       @include some-display;
     }
-
-    .after {
-      @include some-display;
-    }
   }
 
   .devui-popover-content {
     position: absolute;
     display: none;
-    overflow: hidden;
     padding: 5px 14px;
     align-items: center;
     flex-wrap: wrap;
@@ -48,6 +33,15 @@
     background-color: $devui-feedback-overlay-bg;
     font-size: $devui-font-size-sm;
 
+    .after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      transform: rotate(45deg);
+      position: absolute;
+      background-color: $devui-feedback-overlay-bg;
+    }
+
     &.is-icon {
       flex-wrap: nowrap;
     }
@@ -58,56 +52,49 @@
   }
 }
 
+
+@keyframes some-animation {
+  0% {
+    opacity: 0;
+    @include some-display;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 //动画效果
 .devui-popover {
   &.devui-popover-animation {
-    $devui-popover-animation-wait:0s;
     @mixin some-animation {
-      animation: some-animation 0.2s $devui-animation-linear $devui-popover-animation-wait 1 forwards;
+      animation: some-animation 0.5s $devui-animation-linear  1 forwards;
     }
 
     .devui-popover-content {
-      opacity: 0;
-      @include some-animation;
-    }
-
-    .after {
-      $devui-popover-animation-wait:0.02s;
-
-      opacity: 0;
       @include some-animation;
     }
   }
 }
 
-@keyframes some-animation {
-  0% {
-    @include some-display;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
 
 //left等方向
 .devui-popover {
   @mixin left-postion--content {
-    left: var(--devui-popover-margin);
+    left: $devui-popover-margin;
     top: 0;
     transform: translate(-100%, 0);
   }
   @mixin left-postion--after {
-    left: var(--devui-popover-margin);
+    right: $devui-popover-width;
     top: 50%;
-    margin-top: var(--devui-popover-width);
-    margin-left: var(--devui-popover-width);
+    margin-top: $devui-popover-width;
+    margin-left: $devui-popover-margin;
   }
 
   &.left {
     .devui-popover-content {
-      @include left-postion--content();
-
+      @include left-postion--content;
       top: 50%;
       transform: translate(-100%, -50%);
     }
@@ -125,7 +112,7 @@
     .after {
       @include left-postion--after;
 
-      top: var(--devui-popover-offset);
+      top: $devui-popover-offset;
       margin-top: auto;
     }
   }
@@ -141,23 +128,22 @@
     .after {
       @include left-postion--after;
 
-      bottom: var(--devui-popover-offset);
+      bottom: $devui-popover-offset;
       margin-top: auto;
     }
   }
 }
 
-//top等方向
+// //top等方向
 .devui-popover {
   @mixin top-postion--content {
-    top: var(--devui-popover-margin);
+    top: $devui-popover-margin;
     left: 0;
     transform: translate(0, -100%);
   }
   @mixin top-postion--after {
-    top: var(--devui-popover-margin);
-    margin-top: var(--devui-popover-width);
-    margin-left: var(--devui-popover-width);
+    bottom:  $devui-popover-width;
+    margin-left: $devui-popover-width;
   }
 
   &.top {
@@ -182,9 +168,9 @@
     .after {
       @include top-postion--after;
 
-      left: var(--devui-popover-offset);
+      left: $devui-popover-offset;
       margin-left: auto;
-      margin-right: var(--devui-popover-width);
+      margin-right: $devui-popover-width;
     }
   }
 
@@ -199,22 +185,22 @@
     .after {
       @include top-postion--after;
 
-      right: var(--devui-popover-offset);
+      right: $devui-popover-offset;
     }
   }
 }
 
-//right等方向
+ //right等方向
 .devui-popover {
   @mixin right-postion--content {
-    right: var(--devui-popover-margin);
+    right: $devui-popover-margin;
     top: 50%;
     transform: translate(100%, 0);
   }
   @mixin right-postion--after {
-    right: var(--devui-popover-margin);
-    margin-right: var(--devui-popover-width);
-    top: var(--devui-popover-offset);
+    left: $devui-popover-width;
+    margin-right: $devui-popover-width;
+    top: $devui-popover-offset;
   }
 
   &.right {
@@ -228,7 +214,7 @@
       @include right-postion--after;
 
       top: 50%;
-      margin-top: var(--devui-popover-width);
+      margin-top: $devui-popover-width;
     }
   }
 
@@ -254,8 +240,8 @@
 
     .after {
       @include right-postion--after;
-
-      bottom: var(--devui-popover-offset);
+      top: auto;
+      bottom: $devui-popover-offset;
     }
   }
 }
@@ -265,14 +251,14 @@
   @mixin bottom-postion--content {
     left: 0;
     bottom: 0;
-    margin-bottom: var(--devui-popover-width);
+    margin-bottom: $devui-popover-width;
     transform: translate(0, 100%);
   }
   @mixin bottom-postion--after {
-    left: var(--devui-popover-offset);
-    bottom: var(--devui-popover-margin);
-    margin-bottom: var(--devui-popover-width);
-    margin-right: var(--devui-popover-width);
+    left: $devui-popover-offset;
+    top:  $devui-popover-width;
+    margin-bottom: $devui-popover-width;
+    margin-right: $devui-popover-width;
   }
 
   &.bottom {
@@ -289,7 +275,7 @@
 
       left: 50%;
       margin-right: auto;
-      margin-left: var(--devui-popover-width);
+      margin-left: $devui-popover-width;
     }
   }
 
@@ -316,8 +302,8 @@
 
       left: auto;
       margin-right: auto;
-      right: var(--devui-popover-offset);
-      margin-left: var(--devui-popover-width);
+      right: $devui-popover-offset;
+      margin-left: $devui-popover-width;
     }
   }
 }
diff --git a/devui/popover/src/popover.tsx b/devui/popover/src/popover.tsx
index 9d7bbd97f0da66c2d6d8485832879650b03fc7a3..f467f8b8808b3ff36751ea7b45d8df554e10d338 100644
--- a/devui/popover/src/popover.tsx
+++ b/devui/popover/src/popover.tsx
@@ -16,6 +16,7 @@ const popTypeClass = {
 
 export default defineComponent({
   name: 'DPopover',
+  
   directives: {
     clickoutside: clickoutsideDirective
   },
@@ -25,10 +26,12 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+
     position: {
       type: String as () => positionType,
       default: 'bottom'
     },
+
     content: {
       type: String,
       default: 'default'
@@ -76,8 +79,10 @@ export default defineComponent({
   },
 
   setup(props, ctx) {
+    const { slots } = ctx;
     const visible = ref(props.visible);
     const { position, content, zIndex, trigger, popType, popoverStyle, mouseEnterDelay, mouseLeaveDelay, showAnimation, popMaxWidth } = toRefs(props);
+    const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value }
     const isClick = trigger.value === 'click'
     const iconType = reactive(popTypeClass[popType.value])
     const event = function () {
@@ -92,18 +97,10 @@ export default defineComponent({
     const leave = debounce(() => { visible.value = false }, mouseLeaveDelay.value)
     const onMouseenter = isClick ? null : enter
     const onMouseleave = isClick ? null : leave
-    const hiddenContext = function () {
-      visible.value = false
-    }
+    const hiddenContext = () => { visible.value = false }
+    popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`)
 
     return () => {
-      const { slots } = ctx;
-      const style: CSSProperties = {
-        zIndex: zIndex.value,
-        ...popoverStyle.value
-      }
-      popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`)
-
       return (
         <div class={
           ['devui-popover',
@@ -113,13 +110,13 @@ export default defineComponent({
               'devui-popover-isVisible': visible.value
             }
           ]} >
-          <span class="after" style={style}></span>
           <div class='devui-popover-reference' onMouseenter={onMouseenter} onMouseleave={onMouseleave} onClick={onClick} v-clickoutside={hiddenContext}>
             {slots.reference?.()}
           </div>
           <div class={['devui-popover-content', iconType.name ? 'is-icon' : '']} style={style}>
             {iconType.name && <d-icon name={iconType.name} color={iconType.color} class="devui-popover-icon" size="16px" />}
             {slots.content?.() || <span>{content.value}</span>}
+            <span class="after" style={style}></span>
           </div>
         </div>
       )