diff --git a/components.d.ts b/components.d.ts
index 370a3a3..5eebcfe 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -130,6 +130,7 @@ declare module '@vue/runtime-core' {
     'Notification.story': typeof import('./src/components/Feedback/Notification/notification.story.vue')['default']
     'PageHeader.story': typeof import('./src/components/Navigation/PageHeader/pageHeader.story.vue')['default']
     'Pagination.story': typeof import('./src/components/Data/pagination.story.vue')['default']
+    'Popover.story': typeof import('./src/components/Feedback/Popover/popover.story.vue')['default']
     'Progress.story': typeof import('./src/components/Data/progress.story.vue')['default']
     'Radio.story': typeof import('./src/components/Form/radio.story.vue')['default']
     'Rate.story': typeof import('./src/components/Form/rate.story.vue')['default']
diff --git a/src/components/Feedback/Popover/popover.story.md b/src/components/Feedback/Popover/popover.story.md
new file mode 100644
index 0000000..e52dfbb
--- /dev/null
+++ b/src/components/Feedback/Popover/popover.story.md
@@ -0,0 +1,42 @@
+## Attributes
+
+| Name                      | Description                                                                                                                                                              | Type            | Accepted Values                                                                                           | Default                                                                    |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| trigger                   | how the popover is triggered                                                                                                                                             | string          | click/focus/hover/contextmenu                                                                             | click                                                                      |
+| title                     | popover title                                                                                                                                                            | string          | —                                                                                                         | —                                                                          |
+| effect                    | Tooltip theme, built-in theme: `dark` / `light`                                                                                                                          | string          | string                                                                                                    | light                                                                      |
+| content                   | popover content, can be replaced with a default `slot`                                                                                                                   | string          | —                                                                                                         | —                                                                          |
+| width                     | popover width                                                                                                                                                            | string / number | —                                                                                                         | Min width 150px                                                            |
+| placement                 | popover placement                                                                                                                                                        | string          | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                                                     |
+| disabled                  | whether Popover is disabled                                                                                                                                              | boolean         | —                                                                                                         | false                                                                      |
+| visible / v-model:visible | whether popover is visible                                                                                                                                               | Boolean         | —                                                                                                         | false                                                                      |
+| offset                    | popover offset                                                                                                                                                           | number          | —                                                                                                         | 0                                                                          |
+| transition                | popover transition animation                                                                                                                                             | string          | —                                                                                                         | el-fade-in-linear                                                          |
+| show-arrow                | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://githubfast.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean         | —                                                                                                         | true                                                                       |
+| popper-options            | parameters for [popper.js](https://popper.js.org/docs/v2/)                                                                                                               | object          | please refer to [popper.js](https://popper.js.org/docs/v2/)                                               | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
+| popper-class              | custom class name for popover                                                                                                                                            | string          | —                                                                                                         | —                                                                          |
+| popper-style              | custom style for popover                                                                                                                                                 | string / object | —                                                                                                         | —                                                                          |
+| show-after                | delay of appearance, in millisecond                                                                                                                                      | number          | —                                                                                                         | 0                                                                          |
+| hide-after                | delay of disappear, in millisecond                                                                                                                                       | number          | —                                                                                                         | 200                                                                        |
+| auto-close                | timeout in milliseconds to hide tooltip                                                                                                                                  | number          | —                                                                                                         | 0                                                                          |
+| tabindex                  | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover                                                                      | number          | —                                                                                                         | —                                                                          |
+| teleported                | whether popover dropdown is teleported to the body                                                                                                                       | boolean         | true / false                                                                                              | true                                                                       |
+| persistent                | when popover inactive and `persistent` is `false` , popover will be destroyed                                                                                            | boolean         | —                                                                                                         | true                                                                       |
+
+## Slots
+
+| Name      | Description                        |
+| --------- | ---------------------------------- |
+| —         | text content of popover            |
+| reference | HTML element that triggers popover |
+
+## Events
+
+| Name         | Description                                  | Parameters |
+| ------------ | -------------------------------------------- | ---------- |
+| show         | triggers when popover shows                  | —          |
+| before-enter | triggers when the entering transition before | —          |
+| after-enter  | triggers when the entering transition ends   | —          |
+| hide         | triggers when popover hides                  | —          |
+| before-leave | triggers when the leaving transition before  | —          |
+| after-leave  | triggers when the leaving transition ends    | —          |
diff --git a/src/components/Feedback/Popover/popover.story.vue b/src/components/Feedback/Popover/popover.story.vue
new file mode 100644
index 0000000..4d0ae2f
--- /dev/null
+++ b/src/components/Feedback/Popover/popover.story.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { PopoverProps } from 'element-plus'
+import placementOptions from '@/constants/placementOptions'
+const basicData = reactive({
+  effect: 'dark',
+  content: 'content',
+  placement: 'bottom' as PopoverProps['placement'],
+  visible: null as PopoverProps['visible'],
+  disabled: false,
+  offset: 0,
+  showAfter: 0,
+  showArrow: true,
+  hideAfter: 0,
+  enterable: true,
+  trigger: 'hover' as PopoverProps['trigger'],
+})
+
+const basicSource = computed(() => {
+  return `<el-popover${isAttribute(
+    basicData.effect !== 'dark',
+    'effect="light"',
+  )}${isAttribute(
+    basicData.content !== '',
+    `content="${basicData.content}"`,
+  )}${isAttribute(
+    basicData.placement !== 'bottom',
+    `placement="${basicData.placement}"`,
+  )}${isAttribute(
+    basicData.visible !== null,
+    `:visible="${basicData.visible}"`,
+  )}${isAttribute(
+    basicData.disabled,
+    'disabled',
+  )}${isAttribute(
+    basicData.offset !== 0,
+    `:offset="${basicData.offset}"`,
+  )}${isAttribute(
+    basicData.showAfter !== 0,
+    `:show-after="${basicData.showAfter}"`,
+  )}${isAttribute(
+    !basicData.showArrow,
+    ':show-arrow="false"',
+  )}${isAttribute(
+    basicData.hideAfter !== 0,
+    `:hide-after="${basicData.hideAfter}"`,
+  )}${isAttribute(
+    !basicData.enterable,
+    ':enterable="false"',
+  )}${isAttribute(
+    basicData.trigger !== 'hover',
+    `trigger="${basicData.trigger}"`,
+  )}
+>
+  <template #reference>
+    <el-button>el-popover</el-button>
+  </template>
+</el-popover>`
+})
+</script>
+
+<!-- icon from https://icones.js.org/collection/all?s=popover -->
+<template>
+  <Story title="Feedback/Popover" icon="mdi-light:tooltip-text">
+    <Variant
+      title="Basic Usage"
+      :source="basicSource"
+    >
+      <el-popover
+        :effect="basicData.effect"
+        :content="basicData.content"
+        :placement="basicData.placement"
+        :visible="basicData.visible"
+        :disabled="basicData.disabled"
+        :offset="basicData.offset"
+        :show-after="basicData.showAfter"
+        :show-arrow="basicData.showArrow"
+        :hide-after="basicData.hideAfter"
+        :enterable="basicData.enterable"
+        :trigger="basicData.trigger"
+      >
+        <template #reference>
+          <el-button>
+            el-popover
+          </el-button>
+        </template>
+      </el-popover>
+      <template #controls>
+        <HstButtonGroup
+          v-model="basicData.effect" title="effetc"
+          :options="[
+            {
+              value: 'light',
+              label: 'light',
+            },
+            {
+              value: 'dark',
+              label: 'dark',
+            },
+          ]"
+        />
+        <HstText
+          v-model="basicData.content"
+          title="content"
+        />
+        <HstSelect
+          v-model="basicData.placement" title="placement"
+          :options="placementOptions"
+        />
+        <HstCheckbox v-model="basicData.disabled" title="disabled" />
+        <HstButtonGroup
+          v-model="basicData.visible"
+          :style="useElDisplay(!basicData.disabled)"
+          title="visible"
+          :options="[
+            {
+              value: true,
+              label: 'true',
+            },
+            {
+              value: false,
+              label: 'false',
+            },
+            {
+              value: null,
+              label: 'null',
+            },
+          ]"
+        />
+        <HstNumber v-model="basicData.offset" title="offset" />
+        <HstNumber v-model="basicData.showAfter" title="show-after" />
+        <HstNumber v-model="basicData.hideAfter" title="hide-after" />
+        <HstCheckbox v-model="basicData.showArrow" title="show-arrow" />
+        <HstCheckbox v-model="basicData.enterable" title="enterable" />
+        <HstSelect
+          v-model="basicData.trigger"
+          title="trigger"
+          :options="[
+            {
+              value: 'hover',
+              label: 'hover',
+            },
+            {
+              value: 'focus',
+              label: 'focus',
+            },
+            {
+              value: 'click',
+              label: 'click',
+            },
+          ]"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/components/Feedback/Tooltip/tooltip.story.vue b/src/components/Feedback/Tooltip/tooltip.story.vue
index f745ebf..6f73a00 100644
--- a/src/components/Feedback/Tooltip/tooltip.story.vue
+++ b/src/components/Feedback/Tooltip/tooltip.story.vue
@@ -62,7 +62,7 @@ const basicSource = computed(() => {
 
 <!-- icon from https://icones.js.org/collection/all?s=tooltip -->
 <template>
-  <Story title="Feedback/Tooltip" icon="mdi-light:tooltip-text">
+  <Story title="Feedback/Tooltip" icon="mdi:tooltip-minus-outline">
     <Variant
       title="Basic Usage"
       :source="basicSource"
@@ -107,7 +107,7 @@ const basicSource = computed(() => {
           :options="placementOptions"
         />
         <HstCheckbox v-model="basicData.disabled" title="disabled" />
-        <HstSelect
+        <HstButtonGroup
           v-model="basicData.visible"
           :style="useElDisplay(!basicData.disabled)"
           title="visible"