diff --git a/docs/mobile/api_v2/popover.md b/docs/mobile/api_v2/popover.md
new file mode 100644
index 0000000000..56b61a7727
--- /dev/null
+++ b/docs/mobile/api_v2/popover.md
@@ -0,0 +1,19 @@
+---
+title: Popover 弹出气泡
+description: 用于文字提示的气泡框。
+spline: base
+isComponent: true
+toc: false
+---
+
+### 01 组件类型
+
+{{ type }}
+
+### 02 组件样式
+
+{{ theme }}
+
+### 气泡弹出方向
+
+{{ placement }}
\ No newline at end of file
diff --git a/style/mobile/components/popover/_index.less b/style/mobile/components/popover/_index.less
new file mode 100644
index 0000000000..a1cad130d5
--- /dev/null
+++ b/style/mobile/components/popover/_index.less
@@ -0,0 +1,81 @@
+@import "../../base.less";
+
+@import "./_mixin.less";
+
+@import "./_var.less";
+
+@import "../../utilities/_animation.less";
+
+.@{prefix}-popover {
+  display: inline-block;
+  z-index: 1500;
+  position: absolute;
+  overflow: visible;
+
+  &__wrapper {
+    display: inline-block;
+  }
+
+  &__content {
+    position: relative;
+    box-shadow: @popover-shadow;
+    border-radius: 6px;
+    padding: @popover-padding;
+    font-size: @popover-content-font-size;
+    line-height: @popover-content-line-height;
+    box-sizing: border-box;
+    word-break: break-all;
+  }
+
+  &__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: @popover-arrow-width;
+  }
+}
+
+.popover-theme(dark);
+.popover-theme(light);
+.popover-theme(brand);
+.popover-theme(success);
+.popover-theme(warning);
+.popover-theme(error);
+
+.content-placement-top();
+.content-placement-bottom();
+.content-placement-left();
+.content-placement-right();
+
+.arrow-placement-top();
+.arrow-placement-bottom();
+.arrow-placement-left();
+.arrow-placement-right();
+
+// animation
+.@{popover-flow}-enter,
+.@{popover-flow}-enter-from,
+.@{popover-flow}-exiting,
+.@{popover-flow}-leave-to {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.@{popover-flow}-enter-to,
+.@{popover-flow}-entering,
+.@{popover-flow}-leave-from,
+.@{popover-flow}-leave {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+}
+
+.@{popover-flow}-enter-active {
+  transition: @popover-flow-transition-enter;
+}
+
+.@{popover-flow}-leave-active {
+  transition: @popover-flow-transition-leave;
+}
diff --git a/style/mobile/components/popover/_mixin.less b/style/mobile/components/popover/_mixin.less
new file mode 100644
index 0000000000..4538814725
--- /dev/null
+++ b/style/mobile/components/popover/_mixin.less
@@ -0,0 +1,189 @@
+.content-placement-top {
+  .@{prefix}-popover[data-popper-placement^="top"] {
+    .@{prefix}-popover__content {
+      margin-bottom: @popover-content-margin;
+    }
+  }
+}
+
+.content-placement-bottom {
+  .@{prefix}-popover[data-popper-placement^="bottom"] {
+    .@{prefix}-popover__content {
+      margin-top: @popover-content-margin;
+    }
+  }
+}
+
+.content-placement-left {
+  .@{prefix}-popover[data-popper-placement^="left"] {
+    .@{prefix}-popover__content {
+      margin-right: @popover-content-margin;
+    }
+  }
+}
+
+.content-placement-right {
+  .@{prefix}-popover[data-popper-placement^="right"] {
+    .@{prefix}-popover__content {
+      margin-left: @popover-content-margin;
+    }
+  }
+}
+
+.arrow-placement-top() {
+  .@{prefix}-popover[data-popper-placement^="top"] {
+    .@{prefix}-popover__arrow {
+      bottom: 0;
+      border-top-color: currentColor;
+      border-bottom-width: 0;
+      margin-bottom: calc(@popover-arrow-width * -1);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="top"] {
+    transform-origin: 50% 100%;
+
+    .@{prefix}-popover__arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="top-start"] {
+    transform-origin: 0 100%;
+
+    .@{prefix}-popover__arrow {
+      left: @popover-padding;
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="top-end"] {
+    transform-origin: 100% 100%;
+
+    .@{prefix}-popover__arrow {
+      right: @popover-padding;
+    }
+  }
+}
+
+.arrow-placement-left() {
+  .@{prefix}-popover[data-popper-placement^="left"] {
+    .@{prefix}-popover__arrow {
+      right: 0;
+      border-right-width: 0;
+      border-left-color: currentColor;
+      margin-right: calc(@popover-arrow-width * -1);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="left"] {
+    transform-origin: 100% 50%;
+
+    .@{prefix}-popover__arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="left-start"] {
+    transform-origin: 100% 0;
+
+    .@{prefix}-popover__arrow {
+      top: @popover-padding;
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="left-end"] {
+    transform-origin: 100% 100%;
+
+    .@{prefix}-popover__arrow {
+      bottom: @popover-padding;
+    }
+  }
+}
+
+.arrow-placement-bottom() {
+  .@{prefix}-popover[data-popper-placement^="bottom"] {
+    .@{prefix}-popover__arrow {
+      top: 0;
+      border-top-width: 0;
+      border-bottom-color: currentColor;
+      margin-top: calc(@popover-arrow-width * -1);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="bottom"] {
+    transform-origin: 50% 0;
+
+    .@{prefix}-popover__arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="bottom-start"] {
+    transform-origin: 0 0;
+
+    .@{prefix}-popover__arrow {
+      left: @popover-padding;
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="bottom-end"] {
+    transform-origin: 100% 0;
+
+    .@{prefix}-popover__arrow {
+      right: @popover-padding;
+    }
+  }
+}
+
+.arrow-placement-right() {
+  .@{prefix}-popover[data-popper-placement^="right"] {
+    .@{prefix}-popover__arrow {
+      left: 0;
+      border-right-color: currentColor;
+      border-left-width: 0;
+      margin-left: calc(@popover-arrow-width * -1);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="right"] {
+    transform-origin: 0 50%;
+
+    .@{prefix}-popover__arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="right-start"] {
+    transform-origin: 0 0;
+
+    .@{prefix}-popover__arrow {
+      top: @popover-padding;
+    }
+  }
+
+  .@{prefix}-popover[data-popper-placement="right-end"] {
+    transform-origin: 0 100%;
+
+    .@{prefix}-popover__arrow {
+      bottom: @popover-padding;
+    }
+  }
+}
+
+.popover-theme(@theme) {
+  @color: "popover-@{theme}-color";
+  @bgColor: "popover-@{theme}-bg-color";
+
+  .@{prefix}-popover--@{theme} {
+    color: @@color;
+    background: @@bgColor;
+
+    .@{prefix}-popover__arrow {
+      color: @@bgColor;
+    }
+  }
+}
diff --git a/style/mobile/components/popover/_var.less b/style/mobile/components/popover/_var.less
new file mode 100644
index 0000000000..10c0066b66
--- /dev/null
+++ b/style/mobile/components/popover/_var.less
@@ -0,0 +1,49 @@
+// 间距
+@popover-padding: var(--td-popover-padding, 12px) ;
+@popover-content-line-height: 24px;
+@popover-arrow-width: 8px;
+@popover-arrow-height: 8px;
+@popover-content-arrow-spacer: 16px;
+@popover-content-margin: 8px;
+
+@popover-content-font-size: @font-size-m;
+
+@shadow-inset-top: inset 0 .5px 0 #5e5e5e;
+@shadow-inset-right: inset .5px 0 0 #5e5e5e;
+@shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
+@shadow-inset-left: inset -.5px 0 0 #5e5e5e;
+
+@shadow-inset: @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left;
+
+// 阴影
+@popover-shadow: @shadow-3;
+@popover-top-arrow-shadow: @shadow-inset-left, @shadow-inset-bottom;
+@popover-left-arrow-shadow: @shadow-inset-left, @shadow-inset-top;
+@popover-bottom-arrow-shadow: @shadow-inset-top, @shadow-inset-right;
+@popover-right-arrow-shadow: @shadow-inset-right, @shadow-inset-bottom;
+
+// 动画
+@popover-flow: ~"@{prefix}-popover--animation";
+@popover-flow-duration: @anim-duration-base;
+@popover-flow-fn: @anim-time-fn-ease-in;
+@popover-flow-transition-enter: opacity @popover-flow-duration linear;
+@popover-flow-transition-leave: opacity @popover-flow-duration @anim-time-fn-ease-out, visibility @popover-flow-duration @popover-flow-fn;
+
+// 主题颜色
+@popover-dark-color: #fff;
+@popover-dark-bg-color: @font-gray-1;
+
+@popover-light-color: @font-gray-1;
+@popover-light-bg-color: #fff;
+
+@popover-brand-color: @brand-color-7;
+@popover-brand-bg-color: @brand-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;