feat(tooltip): add tooltip component with scrollable overlay

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';

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(
+            <Tooltip title="Tooltip content" visible>
+                <span>Hover me</span>
+            </Tooltip>
+        );
+
+        await waitFor(() => expect(screen.getByText('Tooltip content')).toBeInTheDocument());
+
+        const tooltip = document.querySelector('.dtc-tooltip');
+
+        expect(tooltip).toBeInTheDocument();
+    });
+
+    it('should merge custom overlayClassName', async () => {
+        render(
+            <Tooltip title="Tooltip content" overlayClassName="custom-tooltip" visible>
+                <span>Hover me</span>
+            </Tooltip>
+        );
+
+        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(
+            <Tooltip title="Tooltip content" overlayInnerStyle={{ color: 'red' }} visible>
+                <span>Hover me</span>
+            </Tooltip>
+        );
+
+        await waitFor(() =>
+            expect(document.querySelector('.ant-tooltip-inner')).toBeInTheDocument()
+        );
+
+        expect(document.querySelector('.ant-tooltip-inner')).toHaveStyle({
+            color: 'red',
+        });
+    });
+});

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 title="这是一段简单的提示文案">
+            <span>默认 Tooltip</span>
+        </Tooltip>
+    );
+}

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) => (
+    <div key={index}>这是第 {index + 1} 行自定义高度的提示内容</div>
+));
+
+export default function CustomHeight() {
+    return (
+        <Tooltip
+            title={<div>{content}</div>}
+            overlayInnerStyle={{
+                maxHeight: 160,
+                overflowY: 'auto',
+            }}
+        >
+            <span>点击查看自定义高度 Tooltip</span>
+        </Tooltip>
+    );
+}

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 title="文字提示仅展示文本内容文字提示仅展示文本内容文字提示仅展示文本内容文字提示仅展示文本内容文字提示仅展示文本内容">
+            <span>最大宽度 Tooltip</span>
+        </Tooltip>
+    );
+}

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) => (
+    <div key={index}>这是第 {index + 1} 行较长的提示内容</div>
+));
+
+export default function Scroll() {
+    return (
+        <Tooltip title={<div>{content}</div>} trigger="click">
+            <span>点击查看长内容 Tooltip</span>
+        </Tooltip>
+    );
+}

src/tooltip/index.md

@@ -0,0 +1,26 @@
+---
+title: Tooltip 文字提示
+group: 组件
+toc: content
+demo:
+    cols: 2
+---
+
+# Tooltip 文字提示
+
+## 何时使用
+
+用于展示简单文字提示。组件基于 antd Tooltip 封装，浮层内容最大高度为 400px，超过后可滚动查看。
+
+## 代码演示
+
+<code src="./demos/basic.tsx" title="基本使用" description="Tooltip 的基本使用。"></code>
+<code src="./demos/scroll.tsx" title="长内容滚动" description="当 Tooltip 内容超过 400px 时，浮层内部滚动。"></code>
+<code src="./demos/customHeight.tsx" title="自定义高度" description="通过 overlayInnerStyle 自定义 Tooltip 浮层内容高度。"></code>
+<code src="./demos/maxWidth.tsx" title="最大宽度" description="Tooltip 浮层最大宽度为 400px，长内容自动换行。"></code>
+
+## API
+
+### Tooltip
+
+Tooltip 组件支持 antd Tooltip 组件的所有属性，详见 [Ant Design Tooltip API](https://ant.design/components/tooltip-cn/#API)。

src/tooltip/index.scss

@@ -0,0 +1,13 @@
+.dtc-tooltip {
+    min-width: 220px;
+    max-width: 400px;
+    .ant-tooltip-inner {
+        min-width: 220px;
+        max-width: 400px;
+        padding: 6px 8px;
+        max-height: 400px;
+        overflow-y: auto;
+        font-size: 12px;
+        line-height: 20px;
+    }
+}

src/tooltip/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tooltip as AntdTooltip, TooltipProps as AntdTooltipProps } from 'antd';
+import classNames from 'classnames';
+
+import './index.scss';
+
+export type TooltipProps = AntdTooltipProps;
+
+const Tooltip = ({ overlayClassName, ...rest }: TooltipProps) => {
+    return <AntdTooltip overlayClassName={classNames('dtc-tooltip', overlayClassName)} {...rest} />;
+};
+
+export default Tooltip;