diff --git a/components.d.ts b/components.d.ts
index b9c50fa..370a3a3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -147,6 +147,7 @@ declare module '@vue/runtime-core' {
     'Timeline.story': typeof import('./src/components/Data/Timeline/timeline.story.vue')['default']
     'TimePicker.story': typeof import('./src/components/Form/TimePicker/timePicker.story.vue')['default']
     'TimeSelect.story': typeof import('./src/components/Form/TimeSelect/timeSelect.story.vue')['default']
+    'Tooltip.story': typeof import('./src/components/Feedback/Tooltip/tooltip.story.vue')['default']
   }
   export interface ComponentCustomProperties {
     vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
diff --git a/src/components/Feedback/Tooltip/tooltip.story.md b/src/components/Feedback/Tooltip/tooltip.story.md
new file mode 100644
index 0000000..33fe9a3
--- /dev/null
+++ b/src/components/Feedback/Tooltip/tooltip.story.md
@@ -0,0 +1,27 @@
+## Attributes
+
+| Name                      | Description                                                                                                                                             | Type                         | Accepted Values                                                                                           | Default                                                                    |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| append-to                 | which element the tooltip CONTENT appends to                                                                                                            | `CSSSelector \| HTMLElement` | —                                                                                                         | #el-popper-container-[randomValue]                                         |
+| effect                    | Tooltip theme, built-in theme: `dark` / `light`                                                                                                         | string                       | dark / light                                                                                              | dark                                                                       |
+| content                   | display content, can be overridden by `slot#content`                                                                                                    | String                       | —                                                                                                         | —                                                                          |
+| raw-content               | whether `content` is treated as HTML string                                                                                                             | boolean                      | —                                                                                                         | false                                                                      |
+| placement                 | position of Tooltip                                                                                                                                     | string                       | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                                                     |
+| visible / v-model:visible | visibility of Tooltip                                                                                                                                   | boolean                      | —                                                                                                         | false                                                                      |
+| disabled                  | whether Tooltip is disabled                                                                                                                             | boolean                      | —                                                                                                         | false                                                                      |
+| offset                    | offset of the Tooltip                                                                                                                                   | number                       | —                                                                                                         | 0                                                                          |
+| transition                | animation name                                                                                                                                          | string                       | —                                                                                                         | el-fade-in-linear                                                          |
+| popper-options            | [popper.js](https://popper.js.org/docs/v2/) parameters                                                                                                  | Object                       | refer to [popper.js](https://popper.js.org/docs/v2/) doc                                                  | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
+| show-after                | delay of appearance, in millisecond                                                                                                                     | number                       | —                                                                                                         | 0                                                                          |
+| show-arrow                | whether the tooltip content has an arrow                                                                                                                | boolean                      | true / false                                                                                              | true                                                                       |
+| hide-after                | delay of disappear, in millisecond                                                                                                                      | number                       | —                                                                                                         | 200                                                                        |
+| auto-close                | timeout in milliseconds to hide tooltip                                                                                                                 | number                       | —                                                                                                         | 0                                                                          |
+| manual                    | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true`                                                  | boolean                      | —                                                                                                         | false                                                                      |
+| popper-class              | custom class name for Tooltip's popper                                                                                                                  | string                       | —                                                                                                         | —                                                                          |
+| enterable                 | whether the mouse can enter the tooltip                                                                                                                 | Boolean                      | —                                                                                                         | true                                                                       |
+| tabindex                  | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip                                                     | number                       | —                                                                                                         | 0                                                                          |
+| teleported                | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets                                                        | boolean                      | true / false                                                                                              | true                                                                       |
+| trigger                   | How should the tooltip be triggered (to show)                                                                                                           | string                       | hover / click / focus / contextmenu                                                                       | hover                                                                      |
+| virtual-triggering        | Indicates whether virtual triggering is enabled                                                                                                         | boolean                      | —                                                                                                         | false                                                                      |
+| virtual-ref               | Indicates the reference element to which the tooltip is attached                                                                                        | HTMLElement                  | —                                                                                                         | —                                                                          |
+| trigger-keys              | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard | Array                        | —                                                                                                         | `['Enter','Space']`                                                        |
diff --git a/src/components/Feedback/Tooltip/tooltip.story.vue b/src/components/Feedback/Tooltip/tooltip.story.vue
new file mode 100644
index 0000000..f745ebf
--- /dev/null
+++ b/src/components/Feedback/Tooltip/tooltip.story.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { ElTooltipProps } from 'element-plus'
+import placementOptions from '@/constants/placementOptions'
+const basicData = reactive({
+  effect: 'dark',
+  content: 'content',
+  rawContent: false,
+  placement: 'bottom',
+  visible: null,
+  disabled: false,
+  offset: 0,
+  showAfter: 0,
+  showArrow: true,
+  hideAfter: 0,
+  enterable: true,
+  trigger: 'hover',
+} as ElTooltipProps)
+
+const basicSource = computed(() => {
+  return `<el-tooltip${isAttribute(
+    basicData.effect !== 'dark',
+    'effect="light"',
+  )}${isAttribute(
+    basicData.content !== '',
+    `content="${basicData.content}"`,
+  )}${isAttribute(
+    basicData.rawContent,
+    'raw-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}"`,
+  )}
+>
+  <el-button>el-tooltip</el-button>
+</el-tooltip>`
+})
+</script>
+
+<!-- icon from https://icones.js.org/collection/all?s=tooltip -->
+<template>
+  <Story title="Feedback/Tooltip" icon="mdi-light:tooltip-text">
+    <Variant
+      title="Basic Usage"
+      :source="basicSource"
+    >
+      <el-tooltip
+        :effect="basicData.effect"
+        :content="basicData.content"
+        :raw-content="basicData.rawContent"
+        :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"
+      >
+        <el-button>el-tooltip</el-button>
+      </el-tooltip>
+      <template #controls>
+        <HstButtonGroup
+          v-model="basicData.effect" title="effetc"
+          :options="[
+            {
+              value: 'light',
+              label: 'light',
+            },
+            {
+              value: 'dark',
+              label: 'dark',
+            },
+          ]"
+        />
+        <HstCheckbox v-model="basicData.rawContent" title="raw-content" />
+        <HstText
+          v-model="basicData.content"
+          title="content"
+        />
+        <HstSelect
+          v-model="basicData.placement" title="placement"
+          :options="placementOptions"
+        />
+        <HstCheckbox v-model="basicData.disabled" title="disabled" />
+        <HstSelect
+          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/Form/TimeSelect/timeSelect.story.vue b/src/components/Form/TimeSelect/timeSelect.story.vue
index 54cf900..27814fb 100644
--- a/src/components/Form/TimeSelect/timeSelect.story.vue
+++ b/src/components/Form/TimeSelect/timeSelect.story.vue
@@ -177,11 +177,13 @@ const fixedTimeSource = computed(() => {
         <div class="htw-p-2 tips">
           Use format to control format of time(hours and minutes).
           Check the list
-          <el-link type="primary" target="_blank" href="https://day.js.org/docs/zh-CN/display/format">
+          <el-link
+            type="primary"
+            target="_blank"
+            href="https://day.js.org/docs/zh-CN/display/format"
+            :icon="Link"
+          >
             here
-            <template #icon>
-              <link>
-            </template>
           </el-link>
           of all available formats of Day.js.
         </div>