diff --git a/src/index.ts b/src/index.ts
index a4df49c0d..3fb44dcf4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -39,6 +39,7 @@ export { default as SpreadSheet } from './spreadSheet';
export { default as StatusTag } from './statusTag';
export { default as Table } from './table';
export { default as TinyTag } from './tinyTag';
+export { default as Tooltip } from './tooltip';
export { default as useCookieListener } from './useCookieListener';
export { default as useDebounce } from './useDebounce';
export { default as useIntersectionObserver } from './useIntersectionObserver';
diff --git a/src/tooltip/__tests__/index.test.tsx b/src/tooltip/__tests__/index.test.tsx
new file mode 100644
index 000000000..321e869c3
--- /dev/null
+++ b/src/tooltip/__tests__/index.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Tooltip from '..';
+
+describe('Tooltip', () => {
+ it('should render tooltip with default overlay className', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() => expect(screen.getByText('Tooltip content')).toBeInTheDocument());
+
+ const tooltip = document.querySelector('.dtc-tooltip');
+
+ expect(tooltip).toBeInTheDocument();
+ });
+
+ it('should merge custom overlayClassName', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() => expect(document.querySelector('.dtc-tooltip')).toBeInTheDocument());
+
+ expect(document.querySelector('.dtc-tooltip')).toHaveClass('custom-tooltip');
+ });
+
+ it('should pass overlayInnerStyle to antd Tooltip', async () => {
+ render(
+
+ Hover me
+
+ );
+
+ await waitFor(() =>
+ expect(document.querySelector('.ant-tooltip-inner')).toBeInTheDocument()
+ );
+
+ expect(document.querySelector('.ant-tooltip-inner')).toHaveStyle({
+ color: 'red',
+ });
+ });
+});
diff --git a/src/tooltip/demos/basic.tsx b/src/tooltip/demos/basic.tsx
new file mode 100644
index 000000000..0e46cc5f3
--- /dev/null
+++ b/src/tooltip/demos/basic.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from 'dt-react-component';
+
+export default function Basic() {
+ return (
+
+ 默认 Tooltip
+
+ );
+}
diff --git a/src/tooltip/demos/customHeight.tsx b/src/tooltip/demos/customHeight.tsx
new file mode 100644
index 000000000..beb3e1de1
--- /dev/null
+++ b/src/tooltip/demos/customHeight.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tooltip } from 'dt-react-component';
+
+const content = Array.from({ length: 12 }, (_, index) => (
+ 这是第 {index + 1} 行自定义高度的提示内容
+));
+
+export default function CustomHeight() {
+ return (
+ {content}}
+ overlayInnerStyle={{
+ maxHeight: 160,
+ overflowY: 'auto',
+ }}
+ >
+ 点击查看自定义高度 Tooltip
+
+ );
+}
diff --git a/src/tooltip/demos/maxWidth.tsx b/src/tooltip/demos/maxWidth.tsx
new file mode 100644
index 000000000..7bd9906be
--- /dev/null
+++ b/src/tooltip/demos/maxWidth.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from 'dt-react-component';
+
+export default function MaxWidth() {
+ return (
+
+ 最大宽度 Tooltip
+
+ );
+}
diff --git a/src/tooltip/demos/scroll.tsx b/src/tooltip/demos/scroll.tsx
new file mode 100644
index 000000000..d46393f68
--- /dev/null
+++ b/src/tooltip/demos/scroll.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Tooltip } from 'dt-react-component';
+
+const content = Array.from({ length: 30 }, (_, index) => (
+ 这是第 {index + 1} 行较长的提示内容
+));
+
+export default function Scroll() {
+ return (
+ {content}} trigger="click">
+ 点击查看长内容 Tooltip
+
+ );
+}
diff --git a/src/tooltip/index.md b/src/tooltip/index.md
new file mode 100644
index 000000000..a995c1f03
--- /dev/null
+++ b/src/tooltip/index.md
@@ -0,0 +1,26 @@
+---
+title: Tooltip 文字提示
+group: 组件
+toc: content
+demo:
+ cols: 2
+---
+
+# Tooltip 文字提示
+
+## 何时使用
+
+用于展示简单文字提示。组件基于 antd Tooltip 封装，浮层内容最大高度为 400px，超过后可滚动查看。
+
+## 代码演示
+
+