diff --git a/devui/popover/index.ts b/devui/popover/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8325a36c012a26349dc8ea457c7281712437fb8c
--- /dev/null
+++ b/devui/popover/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Popover from './src/popover'
+
+Popover.install = function (app: App): void {
+  app.component(Popover.name, Popover)
+}
+
+export { Popover }
+
+export default {
+  title: 'Popover 悬浮提示',
+  category: '反馈',
+  status: '开发中', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    app.use(Popover as any);
+  }
+}
diff --git a/devui/popover/src/popover.scss b/devui/popover/src/popover.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d229c000b89f07317780698569f07eec03056653
--- /dev/null
+++ b/devui/popover/src/popover.scss
@@ -0,0 +1,90 @@
+@import '../../style/theme/color';
+@import '../../style//theme//corner';
+@import '../../style//theme/font';
+
+@mixin someDisplay {
+  display: inline-block;
+}
+
+$devui-popover-margin:-6px;
+$devui-popover-left:-8px;
+
+.devui-popover {
+  position: relative;
+  @include someDisplay;
+
+  &::after {
+    content: '';
+    width: 12px;
+    display: none;
+    height: 12px;
+    transform: rotate(45deg);
+    position: absolute;
+    background-color: $devui-feedback-overlay-bg;
+  }
+
+  &.is-hover:hover::after {
+    @include someDisplay;
+  }
+
+  &.is-hover:hover .devui-popover-content {
+    @include someDisplay;
+  }
+
+  .devui-popover-content {
+    position: absolute;
+    display: none;
+    padding: 5px 14px;
+    line-height: 1.5;
+    border-radius: $devui-border-radius-feedback;
+    color: $devui-feedback-overlay-text;
+    background-color: $devui-feedback-overlay-bg;
+    font-size: $devui-font-size-sm;
+  }
+}
+
+.devui-popover {
+  &.left {
+    .devui-popover-content {
+      left: $devui-popover-left;
+      top: 50%;
+      transform: translate(-100%, -50%);
+    }
+
+    &::after {
+      left: $devui-popover-left;
+      top: 50%;
+      margin-top: $devui-popover-margin;
+      margin-left: $devui-popover-margin;
+    }
+  }
+}
+
+.devui-popover {
+  &.left-top {
+    .devui-popover-content {
+      left: $devui-popover-left;
+      top: 0;
+      transform: translate(-100%, 0);
+    }
+
+    &::after {
+      left: $devui-popover-left;
+      top: 50%;
+      margin-top: $devui-popover-margin;
+      margin-left: $devui-popover-margin;
+    }
+  }
+}
+
+.devui-popover {
+  &.devui-popover-isVisible {
+    .devui-popover-content {
+      @include someDisplay;
+    }
+
+    &::after {
+      @include someDisplay;
+    }
+  }
+}
diff --git a/devui/popover/src/popover.tsx b/devui/popover/src/popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0fcfd6d1d9d70f3aefdecbd1e69e59d869b75ea1
--- /dev/null
+++ b/devui/popover/src/popover.tsx
@@ -0,0 +1,80 @@
+import './popover.scss'
+import { defineComponent, toRefs, ref, CSSProperties } from 'vue'
+import clickoutsideDirective from '../../shared/devui-directive/clickoutside'
+type positionType = 'top' | 'right' | 'bottom' | 'left'
+type triggerType = 'click' | 'hover'
+export default defineComponent({
+  name: 'DPopover',
+
+  directives: {
+    clickoutside: clickoutsideDirective
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: [String as () => positionType, Array],
+      default: () => {
+        return ['top', 'right', 'bottom', 'left']
+      }
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+
+    trigger: {
+      type: String as () => triggerType,
+      default: 'click',
+    },
+
+    zIndex: {
+      type: Number as () => CSSProperties,
+      default: 1060
+    }
+  },
+
+  setup(props, ctx) {
+    const visible = ref(props.visible);
+    const { position, content, zIndex, trigger } = toRefs(props);
+    const isClick = trigger.value === 'click'
+    const event = function () {
+      if (visible.value) {
+        visible.value = false;
+        return
+      }
+      visible.value = true
+    }
+    const onClick = isClick ? event : null;
+    const onMouseenter = isClick ? null : () => { visible.value = true }
+    const onMouseleave = isClick ? null : () => { visible.value = false }
+    const hiddenContext = function () {
+      visible.value = false
+    }
+
+    return () => {
+      const { slots } = ctx;
+      const style: CSSProperties = {
+        zIndex: zIndex.value
+      }
+      return (
+        <div class={['devui-popover',
+          position.value,
+          {
+            'devui-popover-isVisible': visible.value
+          }
+        ]}>
+          <div class='devui-popover-reference' onMouseenter={onMouseenter} onMouseleave={onMouseleave} onClick={onClick} v-clickoutside={hiddenContext}>
+            {slots.reference?.()}
+          </div>
+          <div class='devui-popover-content' style={style}>
+            {slots.content?.() || content.value}
+          </div>
+        </div>
+      )
+    }
+  },
+})
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 7c9f0f769a5d71664eea48998892d7ab61e698e1..90940f5cc0ec14fd5c501c692898246fd9568ffe 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -37,7 +37,7 @@ const sidebar = {
         { text: 'Loading 加载提示', link: '/components/loading/', status: '已完成' },
         { text: 'Mention 提及', link: '/components/mention/' },
         { text: 'Modal 模态弹窗', link: '/components/modal/' },
-        { text: 'Popover 悬浮提示', link: '/components/popover/' },
+        { text: 'Popover 悬浮提示', link: '/components/popover/',status:"开发中" },
         { text: 'ReadTip 阅读提示', link: '/components/read-tip/' },
         { text: 'Toast 全局通知', link: '/components/toast/', status: '已完成' },
         { text: 'Tooltip 提示', link: '/components/tooltip/' },
diff --git a/sites/components/popover/index.md b/sites/components/popover/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..97b69c2f5c83239f746ac977231e05fdf1e9d97e
--- /dev/null
+++ b/sites/components/popover/index.md
@@ -0,0 +1,22 @@
+# Popover 悬浮提示  
+
+<d-popover content="popover" position="left-top"  visible>
+<!-- 使用v-slot缩写#报错，可能是与markdown语法冲突了 -->
+   <template v-slot:content>
+      <span >我是内容权scvsvsvs权根本</span>
+    </template>
+  <template v-slot:reference>
+    <d-button bsStyle="common">contentdev</d-button>
+  </template>
+</d-popover>
+
+```html
+<d-popover content="popover" position="left-top"  visible>
+   <template v-slot:content>
+      <span >我是内容权scvsvsvs权根本</span>
+    </template>
+  <template v-slot:reference>
+    <d-button bsStyle="common">contentdev</d-button>
+  </template>
+</d-popover>
+```
\ No newline at end of file