From 76afa9548c7337a59b4b819e303a7b147d67da1e Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Mon, 29 Jun 2026 16:39:21 +0800 Subject: [PATCH] feat(tooltip): add tooltip component with scrollable overlay --- src/index.ts | 1 + src/tooltip/__tests__/index.test.tsx | 49 ++++++++++++++++++++++++++++ src/tooltip/demos/basic.tsx | 10 ++++++ src/tooltip/demos/customHeight.tsx | 20 ++++++++++++ src/tooltip/demos/maxWidth.tsx | 10 ++++++ src/tooltip/demos/scroll.tsx | 14 ++++++++ src/tooltip/index.md | 26 +++++++++++++++ src/tooltip/index.scss | 13 ++++++++ src/tooltip/index.tsx | 13 ++++++++ 9 files changed, 156 insertions(+) create mode 100644 src/tooltip/__tests__/index.test.tsx create mode 100644 src/tooltip/demos/basic.tsx create mode 100644 src/tooltip/demos/customHeight.tsx create mode 100644 src/tooltip/demos/maxWidth.tsx create mode 100644 src/tooltip/demos/scroll.tsx create mode 100644 src/tooltip/index.md create mode 100644 src/tooltip/index.scss create mode 100644 src/tooltip/index.tsx 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，超过后可滚动查看。 + +## 代码演示 + + + + + + +## API + +### Tooltip + +Tooltip 组件支持 antd Tooltip 组件的所有属性，详见 [Ant Design Tooltip API](https://ant.design/components/tooltip-cn/#API)。 diff --git a/src/tooltip/index.scss b/src/tooltip/index.scss new file mode 100644 index 000000000..f405c191c --- /dev/null +++ b/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; + } +} diff --git a/src/tooltip/index.tsx b/src/tooltip/index.tsx new file mode 100644 index 000000000..c3c37d704 --- /dev/null +++ b/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 ; +}; + +export default Tooltip;