diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index f987a809d0..956c05af91 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -462,17 +462,8 @@ $--popup-modal-opacity: 0.5 !default;
 
 /* Tooltip
 -------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: var(--el-color-text-primary) !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: var(--el-color-text-primary) !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/tooltip.scss
 
 /* Tag
 -------------------------- */
diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss
index 65ad903aa1..1aa056c001 100644
--- a/packages/theme-chalk/src/tooltip.scss
+++ b/packages/theme-chalk/src/tooltip.scss
@@ -1,7 +1,27 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'common/var';
 @import 'popper';
 
+$positions: top, bottom, left, right;
+
+$positionMap: (
+  'top': 'bottom',
+  'bottom': 'top',
+  'left': 'right',
+  'right': 'left',
+);
+
+:root {
+  --el-tooltip-fill: var(--el-color-text-primary);
+  --el-tooltip-color: var(--el-color-white);
+  --el-tooltip-font-size: 12px;
+  --el-tooltip-border-color: var(--el-color-text-primary);
+  --el-tooltip-arrow-size: 6px;
+  --el-tooltip-padding: 10px;
+}
+
 @include b(tooltip) {
   &:focus:not(.focusing),
   &:focus:hover {
@@ -10,9 +30,9 @@
   @include e(popper) {
     position: absolute;
     border-radius: 4px;
-    padding: $--tooltip-padding;
+    padding: var(--el-tooltip-padding);
     z-index: var(--el-index-popper);
-    font-size: $--tooltip-font-size;
+    font-size: var(--el-tooltip-font-size);
     line-height: 1.2;
     min-width: 10px;
     word-wrap: break-word;
@@ -28,7 +48,7 @@
     }
 
     .popper__arrow {
-      border-width: $--tooltip-arrow-size;
+      border-width: var(--el-tooltip-arrow-size);
     }
 
     .popper__arrow::after {
@@ -36,106 +56,43 @@
       border-width: 5px;
     }
 
-    &[x-placement^='top'] {
-      margin-bottom: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^='top'] .popper__arrow {
-      bottom: -$--tooltip-arrow-size;
-      border-top-color: $--tooltip-border-color;
-      border-bottom-width: 0;
-
-      &::after {
-        bottom: 1px;
-        margin-left: -5px;
-        border-top-color: $--tooltip-fill;
-        border-bottom-width: 0;
+    @each $position in $positions {
+      &[x-placement^='#{$position}'] {
+        margin-#{map.get($positionMap, $position)}: calc(
+          var(--el-tooltip-arrow-size + 6px)
+        );
       }
-    }
 
-    &[x-placement^='bottom'] {
-      margin-top: #{$--tooltip-arrow-size + 6px};
-    }
+      &[x-placement^='#{$position}'] .popper__arrow {
+        #{map.get($positionMap, $position)}: calc(
+          0px - var(--el-tooltip-arrow-size)
+        );
+        border-#{$position}-color: var(--el-tooltip-border-color);
+        border-#{map.get($positionMap, $position)}-width: 0;
 
-    &[x-placement^='bottom'] .popper__arrow {
-      top: -$--tooltip-arrow-size;
-      border-top-width: 0;
-      border-bottom-color: $--tooltip-border-color;
-
-      &::after {
-        top: 1px;
-        margin-left: -5px;
-        border-top-width: 0;
-        border-bottom-color: $--tooltip-fill;
-      }
-    }
-
-    &[x-placement^='right'] {
-      margin-left: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^='right'] .popper__arrow {
-      left: -$--tooltip-arrow-size;
-      border-right-color: $--tooltip-border-color;
-      border-left-width: 0;
-
-      &::after {
-        bottom: -5px;
-        left: 1px;
-        border-right-color: $--tooltip-fill;
-        border-left-width: 0;
-      }
-    }
-
-    &[x-placement^='left'] {
-      margin-right: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^='left'] .popper__arrow {
-      right: -$--tooltip-arrow-size;
-      border-right-width: 0;
-      border-left-color: $--tooltip-border-color;
-
-      &::after {
-        right: 1px;
-        bottom: -5px;
-        margin-left: -5px;
-        border-right-width: 0;
-        border-left-color: $--tooltip-fill;
+        &::after {
+          #{map.get($positionMap, $position)}: 1px;
+          border-#{$position}-color: var(--el-tooltip-fill);
+          border-#{map.get($positionMap, $position)}-width: 0;
+        }
       }
     }
 
     @include when(dark) {
-      background: $--tooltip-fill;
-      color: $--tooltip-color;
+      background: var(--el-tooltip-fill);
+      color: var(--el-tooltip-color);
     }
 
     @include when(light) {
-      background: $--tooltip-color;
-      border: 1px solid $--tooltip-fill;
+      background: var(--el-tooltip-color);
+      border: 1px solid var(--el-tooltip-fill);
 
-      &[x-placement^='top'] .popper__arrow {
-        border-top-color: $--tooltip-fill;
-        &::after {
-          border-top-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^='bottom'] .popper__arrow {
-        border-bottom-color: $--tooltip-fill;
-        &::after {
-          border-bottom-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^='left'] .popper__arrow {
-        border-left-color: $--tooltip-fill;
-        &::after {
-          border-left-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^='right'] .popper__arrow {
-        border-right-color: $--tooltip-fill;
-        &::after {
-          border-right-color: $--tooltip-color;
+      @each $position in $positions {
+        &[x-placement^='#{$position}'] .popper__arrow {
+          border-top-color: var(--el-tooltip-fill);
+          &::after {
+            border-top-color: var(--el-tooltip-color);
+          }
         }
       }
     }