diff --git a/packages/components/popover/README.en-US.md b/packages/components/popover/README.en-US.md
index afa51941c..f9caf2f0d 100644
--- a/packages/components/popover/README.en-US.md
+++ b/packages/components/popover/README.en-US.md
@@ -42,3 +42,15 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-popover-padding | 24rpx | -
+--td-popover-dark-color | @text-color-anti | -
+--td-popover-dark-bg-color | @font-gray-1 | -
+--td-popover-light-color | @text-color-primary | -
+--td-popover-light-bg-color | @bg-color-container | -
+--td-popover-brand-color | @primary-color-7 | -
+--td-popover-brand-bg-color | @primary-color-1 | -
+--td-popover-success-color | @success-color-5 | -
+--td-popover-success-bg-color | @success-color-1 | -
+--td-popover-warning-color | @warning-color-5 | -
+--td-popover-warning-bg-color | @warning-color-1 | -
+--td-popover-error-color | @error-color-6 | -
+--td-popover-error-bg-color | @error-color-1 | -
\ No newline at end of file
diff --git a/packages/components/popover/README.md b/packages/components/popover/README.md
index 2b12aba27..c41e20c4e 100644
--- a/packages/components/popover/README.md
+++ b/packages/components/popover/README.md
@@ -80,3 +80,15 @@ t-class-content | 内容样式类
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-popover-padding | 24rpx | -
+--td-popover-dark-color | @text-color-anti | -
+--td-popover-dark-bg-color | @font-gray-1 | -
+--td-popover-light-color | @text-color-primary | -
+--td-popover-light-bg-color | @bg-color-container | -
+--td-popover-brand-color | @primary-color-7 | -
+--td-popover-brand-bg-color | @primary-color-1 | -
+--td-popover-success-color | @success-color-5 | -
+--td-popover-success-bg-color | @success-color-1 | -
+--td-popover-warning-color | @warning-color-5 | -
+--td-popover-warning-bg-color | @warning-color-1 | -
+--td-popover-error-color | @error-color-6 | -
+--td-popover-error-bg-color | @error-color-1 | -
\ No newline at end of file
diff --git a/packages/components/popover/popover.less b/packages/components/popover/popover.less
index 40e474764..2e4037089 100644
--- a/packages/components/popover/popover.less
+++ b/packages/components/popover/popover.less
@@ -2,25 +2,27 @@
 
 @popover: ~'@{prefix}-popover';
 
-// 主题色变量
+// 对外暴露变量
 @popover-padding: var(--td-popover-padding, 24rpx);
+
+// 尺寸变量
 @popover-arrow-width: 16rpx;
 @popover-content-margin: 16rpx;
 @popover-content-arrow-margin: 24rpx;
 
 // 主题色变量
-@popover-dark-color: #fff;
-@popover-dark-bg-color: @font-gray-1;
-@popover-light-color: @text-color-primary;
-@popover-light-bg-color: @bg-color-container;
-@popover-brand-color: @primary-color-7;
-@popover-brand-bg-color: @primary-color-1;
-@popover-success-color: @success-color-5;
-@popover-success-bg-color: @success-color-1;
-@popover-warning-color: @warning-color-5;
-@popover-warning-bg-color: @warning-color-1;
-@popover-error-color: @error-color-6;
-@popover-error-bg-color: @error-color-1;
+@popover-dark-color: var(--td-popover-dark-color, @text-color-anti);
+@popover-dark-bg-color: var(--td-popover-dark-bg-color, @font-gray-1);
+@popover-light-color: var(--td-popover-light-color, @text-color-primary);
+@popover-light-bg-color: var(--td-popover-light-bg-color, @bg-color-container);
+@popover-brand-color: var(--td-popover-brand-color, @primary-color-7);
+@popover-brand-bg-color: var(--td-popover-brand-bg-color, @primary-color-1);
+@popover-success-color: var(--td-popover-success-color, @success-color-5);
+@popover-success-bg-color: var(--td-popover-success-bg-color, @success-color-1);
+@popover-warning-color: var(--td-popover-warning-color, @warning-color-5);
+@popover-warning-bg-color: var(--td-popover-warning-bg-color, @warning-color-1);
+@popover-error-color: var(--td-popover-error-color, @error-color-6);
+@popover-error-bg-color: var(--td-popover-error-bg-color, @error-color-1);
 
 .@{popover}__wrapper {
   display: inline-block;
@@ -45,7 +47,6 @@
     line-height: 48rpx;
     box-sizing: border-box;
     word-break: break-all;
-
     border-radius: 6px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -93,7 +94,9 @@
 .arrow-placement-right();
 
 .content-placement-top {
-  .@{prefix}-popover[data-placement^='top'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-top,
+  .@{prefix}-popover.@{prefix}-popover--placement-top-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-top-end {
     .@{prefix}-popover__content {
       margin-bottom: @popover-content-margin;
     }
@@ -104,7 +107,9 @@
 }
 
 .content-placement-bottom {
-  .@{prefix}-popover[data-placement^='bottom'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom,
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-end {
     .@{prefix}-popover__content {
       margin-top: @popover-content-margin;
     }
@@ -115,7 +120,9 @@
 }
 
 .content-placement-left {
-  .@{prefix}-popover[data-placement^='left'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-left,
+  .@{prefix}-popover.@{prefix}-popover--placement-left-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-left-end {
     .@{prefix}-popover__content {
       margin-right: @popover-content-margin;
     }
@@ -126,7 +133,9 @@
 }
 
 .content-placement-right {
-  .@{prefix}-popover[data-placement^='right'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-right,
+  .@{prefix}-popover.@{prefix}-popover--placement-right-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-right-end {
     .@{prefix}-popover__content {
       margin-left: @popover-content-margin;
     }
@@ -137,7 +146,9 @@
 }
 
 .arrow-placement-top() {
-  .@{prefix}-popover[data-placement^='top'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-top,
+  .@{prefix}-popover.@{prefix}-popover--placement-top-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-top-end {
     .@{prefix}-popover__arrow {
       bottom: 0;
       border-top-color: currentColor;
@@ -146,7 +157,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='top'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-top {
     transform-origin: 50% 100%;
 
     .@{prefix}-popover__arrow {
@@ -155,7 +166,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='top-start'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-top-start {
     transform-origin: 0 100%;
 
     .@{prefix}-popover__arrow {
@@ -163,7 +174,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='top-end'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-top-end {
     transform-origin: 100% 100%;
 
     .@{prefix}-popover__arrow {
@@ -173,7 +184,9 @@
 }
 
 .arrow-placement-left() {
-  .@{prefix}-popover[data-placement^='left'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-left,
+  .@{prefix}-popover.@{prefix}-popover--placement-left-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-left-end {
     .@{prefix}-popover__arrow {
       right: 0;
       border-right-width: 0;
@@ -182,7 +195,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='left'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-left {
     transform-origin: 100% 50%;
 
     .@{prefix}-popover__arrow {
@@ -191,7 +204,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='left-start'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-left-start {
     transform-origin: 100% 0;
 
     .@{prefix}-popover__arrow {
@@ -199,7 +212,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='left-end'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-left-end {
     transform-origin: 100% 100%;
 
     .@{prefix}-popover__arrow {
@@ -209,7 +222,9 @@
 }
 
 .arrow-placement-bottom() {
-  .@{prefix}-popover[data-placement^='bottom'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom,
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-end {
     .@{prefix}-popover__arrow {
       top: 0;
       border-top-width: 0;
@@ -218,7 +233,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='bottom'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom {
     transform-origin: 50% 0;
 
     .@{prefix}-popover__arrow {
@@ -227,7 +242,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='bottom-start'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-start {
     transform-origin: 0 0;
 
     .@{prefix}-popover__arrow {
@@ -235,7 +250,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='bottom-end'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-bottom-end {
     transform-origin: 100% 0;
 
     .@{prefix}-popover__arrow {
@@ -245,7 +260,9 @@
 }
 
 .arrow-placement-right() {
-  .@{prefix}-popover[data-placement^='right'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-right,
+  .@{prefix}-popover.@{prefix}-popover--placement-right-start,
+  .@{prefix}-popover.@{prefix}-popover--placement-right-end {
     .@{prefix}-popover__arrow {
       left: 0;
       border-right-color: currentColor;
@@ -254,7 +271,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='right'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-right {
     transform-origin: 0 50%;
 
     .@{prefix}-popover__arrow {
@@ -263,7 +280,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='right-start'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-right-start {
     transform-origin: 0 0;
 
     .@{prefix}-popover__arrow {
@@ -271,7 +288,7 @@
     }
   }
 
-  .@{prefix}-popover[data-placement='right-end'] {
+  .@{prefix}-popover.@{prefix}-popover--placement-right-end {
     transform-origin: 0 100%;
 
     .@{prefix}-popover__arrow {
diff --git a/packages/components/popover/popover.wxml b/packages/components/popover/popover.wxml
index cac5a49c7..07e54ee87 100644
--- a/packages/components/popover/popover.wxml
+++ b/packages/components/popover/popover.wxml
@@ -16,8 +16,7 @@
   wx:if="{{realVisible}}"
   id="{{classPrefix}}-content"
   style="{{style}} {{contentStyle}} {{customStyle}}"
-  class="{{class}} {{classPrefix}} {{transitionClass}} {{prefix}}-class {{fixed ? classPrefix + '--fixed' : ''}}"
-  data-placement="{{_placement}}"
+  class="{{class}} {{classPrefix}} {{transitionClass}} {{prefix}}-class {{classPrefix}}--placement-{{_placement}} {{fixed ? classPrefix + '--fixed' : ''}}"
 >
   <view
     class="{{classPrefix}}__content {{classPrefix}}--{{theme}} {{prefix}}-class-content {{showArrow ? classPrefix + '__content--arrow' : ''}}"