diff --git a/docs/components/content/Popover/PopoverBasic.vue b/docs/components/content/Popover/PopoverBasic.vue
new file mode 100644
index 0000000..906f2b1
--- /dev/null
+++ b/docs/components/content/Popover/PopoverBasic.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import { Button, Popover } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popover title="测试Title">
+    <Button>Hover me</Button>
+    <template #content>
+      <div>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+    </template>
+  </Popover>
+</template>
diff --git a/docs/components/content/Popover/PopoverOffest.vue b/docs/components/content/Popover/PopoverOffest.vue
new file mode 100644
index 0000000..d0981b4
--- /dev/null
+++ b/docs/components/content/Popover/PopoverOffest.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import { Button, Popover } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popover title="测试Title" :offset="30">
+    <Button>Hover me</Button>
+    <template #content>
+      <div>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+    </template>
+  </Popover>
+</template>
diff --git a/docs/components/content/Popover/PopoverPlacement.vue b/docs/components/content/Popover/PopoverPlacement.vue
new file mode 100644
index 0000000..0fbfda6
--- /dev/null
+++ b/docs/components/content/Popover/PopoverPlacement.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { Button, Popover, Space } from '@lite-space/ui'
+
+  const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ placement, text }">
+    <Popover :placement="placement" title="测试Title">
+      <Button class="w-18">
+        {{ text }}
+      </Button>
+      <template #content>
+        <div>
+          <p>Content</p>
+          <p>Content</p>
+        </div>
+      </template>
+    </Popover>
+  </DefineTemplate>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="top-start" text="TL" />
+        <ReuseTemplate placement="top" text="Top" />
+        <ReuseTemplate placement="top-end" text="TR" />
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="left-start" text="LT" />
+          <ReuseTemplate placement="left" text="Left" />
+          <ReuseTemplate placement="left-end" text="LB" />
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="right-start" text="RT" />
+          <ReuseTemplate placement="right" text="Right" />
+          <ReuseTemplate placement="right-end" text="RB" />
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="bottom-start" text="BL" />
+        <ReuseTemplate placement="bottom" text="Bottom" />
+        <ReuseTemplate placement="bottom-end" text="BR" />
+      </Space>
+    </div>
+  </div>
+</template>
diff --git a/docs/components/content/Tooltip/TooltipBasic.vue b/docs/components/content/Tooltip/TooltipBasic.vue
new file mode 100644
index 0000000..c9fb123
--- /dev/null
+++ b/docs/components/content/Tooltip/TooltipBasic.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+  import { Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <Tooltip content="prompt text">
+    <span class="text-sm">鼠标进入时将显示工具提示</span>
+  </Tooltip>
+</template>
diff --git a/docs/components/content/Tooltip/TooltipOffest.vue b/docs/components/content/Tooltip/TooltipOffest.vue
new file mode 100644
index 0000000..72a6133
--- /dev/null
+++ b/docs/components/content/Tooltip/TooltipOffest.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+  import { Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <Tooltip content="prompt text" :offset="10">
+    <span class="text-sm">鼠标进入时将显示工具提示</span>
+  </Tooltip>
+</template>
diff --git a/docs/components/content/Tooltip/TooltipPlacement.vue b/docs/components/content/Tooltip/TooltipPlacement.vue
new file mode 100644
index 0000000..ef83668
--- /dev/null
+++ b/docs/components/content/Tooltip/TooltipPlacement.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+  import { Button, Space, Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <Tooltip placement="top-start" content="prompt text">
+          <Button class="w-18">
+            TL
+          </Button>
+        </Tooltip>
+        <Tooltip placement="top" content="prompt text">
+          <Button class="w-18">
+            Top
+          </Button>
+        </Tooltip>
+        <Tooltip placement="top-end" content="prompt text">
+          <Button class="w-18">
+            TR
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <Tooltip placement="left-start" content="prompt text">
+            <Button class="w-18">
+              LT
+            </Button>
+          </Tooltip>
+          <Tooltip placement="left" content="prompt text">
+            <Button class="w-18">
+              Left
+            </Button>
+          </Tooltip>
+          <Tooltip placement="left-end" content="prompt text">
+            <Button class="w-18">
+              LB
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <Tooltip placement="right-start" content="prompt text">
+            <Button class="w-18">
+              RT
+            </Button>
+          </Tooltip>
+          <Tooltip placement="right" content="prompt text">
+            <Button class="w-18">
+              Right
+            </Button>
+          </Tooltip>
+          <Tooltip placement="right-end" content="prompt text">
+            <Button class="w-18">
+              RB
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <Tooltip placement="bottom-start" content="prompt text">
+          <Button class="w-18">
+            BL
+          </Button>
+        </Tooltip>
+        <Tooltip placement="bottom" content="prompt text">
+          <Button class="w-18">
+            Bottom
+          </Button>
+        </Tooltip>
+        <Tooltip placement="bottom-end" content="prompt text">
+          <Button class="w-18">
+            BR
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/docs/components/popover.md b/docs/content/docs/components/popover.md
new file mode 100644
index 0000000..2829f73
--- /dev/null
+++ b/docs/content/docs/components/popover.md
@@ -0,0 +1,112 @@
+---
+title: Popover 气泡卡片
+description: 点击/鼠标移入元素，弹出气泡式的卡片浮层。
+---
+
+## Installation
+
+::CodePreview{title="基本用法" src="PopoverBasic"}
+最简单的用法，浮层的大小由内容区域决定。
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Popover } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popover title="测试Title">
+    <Button>Hover me</Button>
+    <template #content>
+      <div>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+    </template>
+  </Popover>
+</template>
+```
+::
+
+::CodePreview{title="位置" src="PopoverPlacement"}
+位置有 12 个方向。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Popover, Space } from '@lite-space/ui'
+
+  const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ placement, text }">
+    <Popover :placement="placement" title="测试Title">
+      <Button class="w-18">
+        {{ text }}
+      </Button>
+      <template #content>
+        <div>
+          <p>Content</p>
+          <p>Content</p>
+        </div>
+      </template>
+    </Popover>
+  </DefineTemplate>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="top-start" text="TL" />
+        <ReuseTemplate placement="top" text="Top" />
+        <ReuseTemplate placement="top-end" text="TR" />
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="left-start" text="LT" />
+          <ReuseTemplate placement="left" text="Left" />
+          <ReuseTemplate placement="left-end" text="LB" />
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <ReuseTemplate placement="right-start" text="RT" />
+          <ReuseTemplate placement="right" text="Right" />
+          <ReuseTemplate placement="right-end" text="RB" />
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <ReuseTemplate placement="bottom-start" text="BL" />
+        <ReuseTemplate placement="bottom" text="Bottom" />
+        <ReuseTemplate placement="bottom-end" text="BR" />
+      </Space>
+    </div>
+  </div>
+</template>
+```
+::
+
+::CodePreview{title="偏移" src="PopoverOffest"}
+使用 `offset` 属性设置偏移量。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Popover } from '@lite-space/ui'
+</script>
+
+<template>
+  <Popover title="测试Title" :offset="30">
+    <Button>Hover me</Button>
+    <template #content>
+      <div>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+    </template>
+  </Popover>
+</template>
+```
+::
diff --git a/docs/content/docs/components/tooltip.md b/docs/content/docs/components/tooltip.md
new file mode 100644
index 0000000..e1f34b1
--- /dev/null
+++ b/docs/content/docs/components/tooltip.md
@@ -0,0 +1,134 @@
+---
+title: Tooltip 文字提示
+description: 简单的文字提示气泡框
+---
+
+## Installation
+
+::CodePreview{title="基本用法" src="TooltipBasic"}
+最简单的用法。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <Tooltip content="prompt text">
+    <span class="text-sm">鼠标进入时将显示工具提示</span>
+  </Tooltip>
+</template>
+```
+::
+
+::CodePreview{title="位置" src="TooltipPlacement"}
+位置有 12 个方向。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Button, Space, Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <div px-6>
+    <div ml-20>
+      <Space>
+        <Tooltip placement="top-start" content="prompt text">
+          <Button class="w-18">
+            TL
+          </Button>
+        </Tooltip>
+        <Tooltip placement="top" content="prompt text">
+          <Button class="w-18">
+            Top
+          </Button>
+        </Tooltip>
+        <Tooltip placement="top-end" content="prompt text">
+          <Button class="w-18">
+            TR
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+    <div flex="~ items-center justify-between">
+      <div>
+        <Space direction="vertical">
+          <Tooltip placement="left-start" content="prompt text">
+            <Button class="w-18">
+              LT
+            </Button>
+          </Tooltip>
+          <Tooltip placement="left" content="prompt text">
+            <Button class="w-18">
+              Left
+            </Button>
+          </Tooltip>
+          <Tooltip placement="left-end" content="prompt text">
+            <Button class="w-18">
+              LB
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+      <div>
+        <Space direction="vertical">
+          <Tooltip placement="right-start" content="prompt text">
+            <Button class="w-18">
+              RT
+            </Button>
+          </Tooltip>
+          <Tooltip placement="right" content="prompt text">
+            <Button class="w-18">
+              Right
+            </Button>
+          </Tooltip>
+          <Tooltip placement="right-end" content="prompt text">
+            <Button class="w-18">
+              RB
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+    </div>
+    <div ml-20>
+      <Space>
+        <Tooltip placement="bottom-start" content="prompt text">
+          <Button class="w-18">
+            BL
+          </Button>
+        </Tooltip>
+        <Tooltip placement="bottom" content="prompt text">
+          <Button class="w-18">
+            Bottom
+          </Button>
+        </Tooltip>
+        <Tooltip placement="bottom-end" content="prompt text">
+          <Button class="w-18">
+            BR
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+  </div>
+</template>
+```
+::
+
+::CodePreview{title="偏移" src="TooltipOffest"}
+使用 `offset` 属性设置偏移量。
+
+#code
+```vue
+<script setup lang="ts">
+  import { Tooltip } from '@lite-space/ui'
+</script>
+
+<template>
+  <Tooltip content="prompt text" :offset="10">
+    <span class="text-sm">鼠标进入时将显示工具提示</span>
+  </Tooltip>
+</template>
+```
+::
diff --git a/docs/utils/toc.ts b/docs/utils/toc.ts
index f3808f0..7d26fc7 100644
--- a/docs/utils/toc.ts
+++ b/docs/utils/toc.ts
@@ -84,6 +84,14 @@ export const toc: Toc[] = [
       {
         title: 'Avatar 头像',
         path: '/docs/components/avatar'
+      },
+      {
+        title: 'Tooltip 文字提示',
+        path: '/docs/components/tooltip'
+      },
+      {
+        title: 'Popover 气泡卡片',
+        path: '/docs/components/popover'
       }
     ]
   }
diff --git a/packages/components/Popover/package.json b/packages/components/Popover/package.json
new file mode 100644
index 0000000..52ab1c2
--- /dev/null
+++ b/packages/components/Popover/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@lite-space/popover",
+  "type": "module",
+  "version": "0.0.0",
+  "keywords": [
+    "vue3",
+    "component",
+    "unocss",
+    "popover"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.mjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "mkdist -d"
+  },
+  "dependencies": {
+    "@lite-space/tooltip": "workspace:*"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.5.1",
+    "mkdist": "^1.5.4",
+    "typescript": "^5.2.2",
+    "vue": "^3.5.9"
+  }
+}
diff --git a/packages/components/Popover/src/Popover.vue b/packages/components/Popover/src/Popover.vue
new file mode 100644
index 0000000..23686b6
--- /dev/null
+++ b/packages/components/Popover/src/Popover.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import type { PopoverProps } from './types'
+
+  import { Tooltip } from '@lite-space/tooltip'
+
+  defineOptions({
+    name: 'LtPopover'
+  })
+
+  const { title, offset = 8, ...restProps } = defineProps<PopoverProps>()
+</script>
+
+<template>
+  <Tooltip :offset="offset" v-bind="restProps">
+    <slot />
+    <template #content>
+      <div class="lt-popover">
+        <div v-if="$slots.title || title" class="lt-popover-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+        <div class="lt-popover-content">
+          <slot name="content" />
+        </div>
+      </div>
+    </template>
+  </Tooltip>
+</template>
diff --git a/packages/components/Popover/src/index.ts b/packages/components/Popover/src/index.ts
new file mode 100644
index 0000000..41d06ed
--- /dev/null
+++ b/packages/components/Popover/src/index.ts
@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.vue'
+export type * from './types'
diff --git a/packages/components/Popover/src/types.d.ts b/packages/components/Popover/src/types.d.ts
new file mode 100644
index 0000000..74d2002
--- /dev/null
+++ b/packages/components/Popover/src/types.d.ts
@@ -0,0 +1,8 @@
+import type { TooltipProps } from '@lite-space/tooltip'
+
+interface LtPopoverProps extends TooltipProps {
+  title: string
+}
+
+export type PopoverProps = Partial<LtPopoverProps>
+export type PopoverInstance = InstanceType<typeof import('./Popover.vue')['default']>
diff --git a/packages/components/Popover/tsconfig.json b/packages/components/Popover/tsconfig.json
new file mode 100644
index 0000000..e38b479
--- /dev/null
+++ b/packages/components/Popover/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "exclude": ["node_modules/*", "src/**/__test__/*"]
+}
diff --git a/packages/components/Tooltip/package.json b/packages/components/Tooltip/package.json
new file mode 100644
index 0000000..27f7fd8
--- /dev/null
+++ b/packages/components/Tooltip/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@lite-space/tooltip",
+  "type": "module",
+  "version": "0.0.0",
+  "keywords": [
+    "vue3",
+    "component",
+    "unocss",
+    "tooltip"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.mjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "mkdist -d"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.5",
+    "@vueuse/core": "^10.11.1"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.5.1",
+    "mkdist": "^1.5.4",
+    "typescript": "^5.2.2",
+    "vue": "^3.5.9"
+  }
+}
diff --git a/packages/components/Tooltip/src/Tooltip.vue b/packages/components/Tooltip/src/Tooltip.vue
new file mode 100644
index 0000000..9e3e44b
--- /dev/null
+++ b/packages/components/Tooltip/src/Tooltip.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+  import type { TooltipProps } from './types'
+
+  import { onClickOutside, useElementHover } from '@vueuse/core'
+  import { computed, ref, toRef, useTemplateRef, watch } from 'vue'
+  import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+
+  defineOptions({
+    name: 'LtTooltip'
+  })
+
+  const props = withDefaults(defineProps<TooltipProps>(), {
+    placement: 'top',
+    trigger: 'hover',
+    offset: 4
+  })
+
+  const emit = defineEmits<{
+    change: [val: boolean]
+  }>()
+  const referenceRef = useTemplateRef('reference')
+  const floatingRef = useTemplateRef('floating')
+
+  const propsOffset = toRef(() => props.offset)
+
+  const isVisibled = props.trigger === 'hover' ? useElementHover(referenceRef) : ref(false)
+
+  if (props.trigger === 'click') {
+    onClickOutside(referenceRef, () => {
+      isVisibled.value = false
+    })
+  }
+
+  const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+    whileElementsMounted: autoUpdate,
+    placement: toRef(() => props.placement),
+    middleware: computed(() => [offset(propsOffset.value), shift(), flip()])
+  })
+
+  function handleClick() {
+    if (props.trigger === 'click')
+      isVisibled.value = !isVisibled.value
+  }
+
+  watch(isVisibled, val => {
+    emit('change', val)
+  })
+</script>
+
+<template>
+  <div ref="reference" class="lt-tooltip" @click="handleClick">
+    <slot />
+    <div
+      v-if="isVisibled"
+      ref="floating"
+      class="lt-tooltip-content"
+      :style="floatingStyles"
+    >
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/Tooltip/src/index.ts b/packages/components/Tooltip/src/index.ts
new file mode 100644
index 0000000..e5a9f67
--- /dev/null
+++ b/packages/components/Tooltip/src/index.ts
@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.vue'
+export type * from './types'
diff --git a/packages/components/Tooltip/src/types.d.ts b/packages/components/Tooltip/src/types.d.ts
new file mode 100644
index 0000000..332aa46
--- /dev/null
+++ b/packages/components/Tooltip/src/types.d.ts
@@ -0,0 +1,9 @@
+interface LtTooltipProps {
+  placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
+  content: string
+  trigger: 'hover' | 'click'
+  offset: number
+}
+
+export type TooltipProps = Partial<LtTooltipProps>
+export type TooltipInstance = InstanceType<typeof import('./Tooltip.vue')['default']>
diff --git a/packages/components/Tooltip/tsconfig.json b/packages/components/Tooltip/tsconfig.json
new file mode 100644
index 0000000..e38b479
--- /dev/null
+++ b/packages/components/Tooltip/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "exclude": ["node_modules/*", "src/**/__test__/*"]
+}
diff --git a/packages/lite-ui/CHANGELOG.md b/packages/lite-ui/CHANGELOG.md
index 67f82f0..eaa8091 100644
--- a/packages/lite-ui/CHANGELOG.md
+++ b/packages/lite-ui/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @lite-space/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- @lite-space/tooltip@0.0.0
+  @lite-space/popover@0.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @lite-space/theme@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes
diff --git a/packages/lite-ui/package.json b/packages/lite-ui/package.json
index 6bb7214..a7446c8 100644
--- a/packages/lite-ui/package.json
+++ b/packages/lite-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lite-space/ui",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A Vue3 based UnoCSS UI library.",
   "author": "AntzyMo <mozbano@163.com>",
   "license": "MIT",
@@ -41,12 +41,14 @@
     "@lite-space/icon": "workspace:*",
     "@lite-space/input": "workspace:*",
     "@lite-space/menu": "workspace:*",
+    "@lite-space/popover": "workspace:*",
     "@lite-space/radio": "workspace:*",
     "@lite-space/space": "workspace:*",
     "@lite-space/switch": "workspace:*",
     "@lite-space/tabs": "workspace:*",
     "@lite-space/tag": "workspace:*",
     "@lite-space/theme": "workspace:*",
+    "@lite-space/tooltip": "workspace:*",
     "@lite-space/utils": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/lite-ui/src/index.ts b/packages/lite-ui/src/index.ts
index 27177cd..d500607 100644
--- a/packages/lite-ui/src/index.ts
+++ b/packages/lite-ui/src/index.ts
@@ -9,9 +9,11 @@ export * from '@lite-space/empty'
 export * from '@lite-space/icon'
 export * from '@lite-space/input'
 export * from '@lite-space/menu'
+export * from '@lite-space/popover'
 export * from '@lite-space/radio'
 export * from '@lite-space/space'
 export * from '@lite-space/switch'
 export * from '@lite-space/tabs'
 export * from '@lite-space/tag'
+export * from '@lite-space/tooltip'
 export type { LtComponentSize } from '@lite-space/utils'
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
index 55ca6ad..1687878 100644
--- a/packages/theme/CHANGELOG.md
+++ b/packages/theme/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @lite-space/theme
 
+## 0.3.0
+
+### Minor Changes
+
+- @lite-space/tooltip@0.0.0
+  @lite-space/popover@0.0.0
+
 ## 0.2.2
 
 ### Patch Changes
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 652f486..3b84959 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lite-space/theme",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "unocss preset for lite-ui",
   "author": "AntzyMo <mozbano@163.com>",
   "license": "MIT",
diff --git a/packages/theme/src/shortcuts/Popover.ts b/packages/theme/src/shortcuts/Popover.ts
new file mode 100644
index 0000000..9baff5c
--- /dev/null
+++ b/packages/theme/src/shortcuts/Popover.ts
@@ -0,0 +1,5 @@
+export const Popover = {
+  'lt-popover': 'px-1.5 py-2',
+  'lt-popover-title': 'font-600 mb-2 text-sm',
+  'lt-popover-content': 'text-sm'
+}
diff --git a/packages/theme/src/shortcuts/Tooltip.ts b/packages/theme/src/shortcuts/Tooltip.ts
new file mode 100644
index 0000000..805e7c6
--- /dev/null
+++ b/packages/theme/src/shortcuts/Tooltip.ts
@@ -0,0 +1,4 @@
+export const Tooltip = {
+  'lt-tooltip': 'inline-block align-middle',
+  'lt-tooltip-content': 'text-xs bg-white rounded-md px-1.5 py.5 border border-solid border-gray-200 z-999'
+}
diff --git a/packages/theme/src/shortcuts/index.ts b/packages/theme/src/shortcuts/index.ts
index e3e1607..85b3a59 100644
--- a/packages/theme/src/shortcuts/index.ts
+++ b/packages/theme/src/shortcuts/index.ts
@@ -9,6 +9,8 @@ import { Button } from './Button'
 import { common } from './common'
 import { Switch } from './Switch'
 import { Divider } from './Divider'
+import { Popover } from './Popover'
+import { Tooltip } from './Tooltip'
 import { MenuShortcuts as Menu } from './Menu'
 import { InputShortcuts as Input } from './Input'
 import { RadioShortcuts as Radio } from './Radio'
@@ -33,7 +35,9 @@ export const shortcuts = [
   Menu,
   Icon,
   Badge,
-  Avatar
+  Avatar,
+  Popover,
+  Tooltip
 ]
 
 /**