feat(Actions): 支持自定义每个操作项的 Tooltip

packages/x/components/actions/ActionsItem.tsx

@@ -1,6 +1,6 @@
 import { CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
-import { Tooltip } from 'antd';
+import { Tooltip, type TooltipProps } from 'antd';
 import { clsx } from 'clsx';
 import React from 'react';
 import useMobile from '../_util/hooks/use-mobile';
@@ -69,6 +69,11 @@ export interface ActionsItemProps extends Omit<React.HTMLAttributes<HTMLDivEleme
    * @descEN Semantic structure styles
    */
   styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  /**
+   * @desc 自定义操作项的 Tooltip，设为 false 时不渲染 Tooltip
+   * @descEN Tooltip for the action item, set to false to disable Tooltip
+   */
+  tooltip?: string | TooltipProps | false;
 }
 
 const ActionsItem: React.FC<ActionsItemProps> = (props) => {
@@ -77,6 +82,7 @@ const ActionsItem: React.FC<ActionsItemProps> = (props) => {
     defaultIcon,
     runningIcon,
     label,
+    tooltip,
     className,
     classNames = {},
     styles = {},
@@ -138,7 +144,14 @@ const ActionsItem: React.FC<ActionsItemProps> = (props) => {
     </div>
   );
 
-  return isMobile ? innerNode : <Tooltip title={label}>{innerNode}</Tooltip>;
+  // ============================ Tooltip ============================
+  const tooltipEnabled = tooltip !== false;
+  const tooltipProps: TooltipProps =
+    typeof tooltip === 'string'
+      ? { title: tooltip }
+      : (tooltip as TooltipProps) || { title: label };
+
+  return isMobile || !tooltipEnabled ? innerNode : <Tooltip {...tooltipProps}>{innerNode}</Tooltip>;
 };
 
 export default ActionsItem;

packages/x/components/actions/Item.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Tooltip, type TooltipProps } from 'antd';
 import { clsx } from 'clsx';
 import React from 'react';
 import useMobile from '../_util/hooks/use-mobile';
@@ -30,6 +30,17 @@ const Item: React.FC<ActionsItemProps> = (props) => {
 
   const iconElement = <div className={`${prefixCls}-icon`}>{item?.icon}</div>;
 
+  // ============================ Tooltip ============================
+  const tooltipConfig = item.tooltip;
+  const tooltipEnabled = tooltipConfig !== false;
+  const tooltipProps: TooltipProps =
+    typeof tooltipConfig === 'string'
+      ? { title: tooltipConfig }
+      : (tooltipConfig as TooltipProps) || { title: item.label };
+
+  const wrappedIcon =
+    isMobile || !tooltipEnabled ? iconElement : <Tooltip {...tooltipProps}>{iconElement}</Tooltip>;
+
   return (
     <div
       className={clsx(`${prefixCls}-item`, classNames.item, {
@@ -50,7 +61,7 @@ const Item: React.FC<ActionsItemProps> = (props) => {
       }}
       key={itemKey}
     >
-      {isMobile ? iconElement : <Tooltip title={item.label}>{iconElement}</Tooltip>}
+      {wrappedIcon}
     </div>
   );
 };

packages/x/components/actions/__tests__/__snapshots__/demo.test.ts.snap

@@ -454,6 +454,98 @@ exports[`renders components/actions/demo/sub.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/actions/demo/tooltip.tsx correctly 1`] = `
+<div
+  class="ant-actions css-var-_R_0_"
+>
+  <div
+    class="ant-actions-list ant-actions-variant-borderless"
+  >
+    <div
+      class="ant-actions-item"
+    >
+      <div
+        class="ant-actions-icon"
+      >
+        <span
+          aria-label="redo"
+          class="anticon anticon-redo"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="redo"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M758.2 839.1C851.8 765.9 912 651.9 912 523.9 912 303 733.5 124.3 512.6 124 291.4 123.7 112 302.8 112 523.9c0 125.2 57.5 236.9 147.6 310.2 3.5 2.8 8.6 2.2 11.4-1.3l39.4-50.5c2.7-3.4 2.1-8.3-1.2-11.1-8.1-6.6-15.9-13.7-23.4-21.2a318.64 318.64 0 01-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 01-68.6 101.7c-9.3 9.3-19.1 18-29.3 26L668.2 724a8 8 0 00-14.1 3l-39.6 162.2c-1.2 5 2.6 9.9 7.7 9.9l167 .8c6.7 0 10.5-7.7 6.3-12.9l-37.3-47.9z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-actions-item"
+    >
+      <div
+        class="ant-actions-icon"
+      >
+        <span
+          aria-label="edit"
+          class="anticon anticon-edit"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="edit"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-actions-item"
+    >
+      <div
+        class="ant-actions-icon"
+      >
+        <span
+          aria-label="edit"
+          class="anticon anticon-edit"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="edit"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/actions/demo/variant.tsx correctly 1`] = `
 <div
   class="ant-flex css-var-_R_0_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"

packages/x/components/actions/__tests__/action-item.test.tsx

@@ -1,11 +1,54 @@
 import React from 'react';
-import { render } from '../../../tests/utils';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import ActionsItem from '../ActionsItem';
 
 describe('Actions.Item', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('renders with no status', () => {
     const { getByText } = render(<ActionsItem defaultIcon="default-icon" />);
     expect(getByText('default-icon')).toBeTruthy();
     render(<ActionsItem defaultIcon="default-icon" status={'xxx' as any} />);
   });
+
+  it('renders default tooltip with label', async () => {
+    const { container } = render(
+      <ActionsItem defaultIcon={<span>icon</span>} label="Action Label" />,
+    );
+    const trigger = container.querySelector('.ant-actions-button-item')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.textContent).toBe('Action Label');
+  });
+
+  it('renders custom tooltip string', async () => {
+    const { container } = render(
+      <ActionsItem defaultIcon={<span>icon</span>} label="Action Label" tooltip="Custom Tooltip" />,
+    );
+    const trigger = container.querySelector('.ant-actions-button-item')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.textContent).toBe('Custom Tooltip');
+  });
+
+  it('does not render tooltip when tooltip is false', async () => {
+    const { container } = render(
+      <ActionsItem defaultIcon={<span>icon</span>} label="Action Label" tooltip={false} />,
+    );
+    const trigger = container.querySelector('.ant-actions-button-item')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).not.toBeInTheDocument();
+  });
 });

packages/x/components/actions/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import { ActionsProps } from '@ant-design/x';
 import React from 'react';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 
 import { findItem } from '../ActionsMenu';
 import Actions from '../index';
@@ -83,6 +83,102 @@ describe('Actions Component', () => {
   });
 });
 
+describe('Actions tooltip', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders default tooltip with label', async () => {
+    const { container } = render(
+      <Actions
+        items={[
+          {
+            key: '1',
+            label: 'Action 1',
+            icon: <span>icon1</span>,
+          },
+        ]}
+      />,
+    );
+    const trigger = container.querySelector('.ant-actions-icon')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.textContent).toBe('Action 1');
+  });
+
+  it('renders custom tooltip string', async () => {
+    const { container } = render(
+      <Actions
+        items={[
+          {
+            key: '1',
+            label: 'Action 1',
+            icon: <span>icon1</span>,
+            tooltip: 'Custom Tooltip Text',
+          },
+        ]}
+      />,
+    );
+    const trigger = container.querySelector('.ant-actions-icon')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.textContent).toBe('Custom Tooltip Text');
+  });
+
+  it('renders custom tooltip props', async () => {
+    const { container } = render(
+      <Actions
+        items={[
+          {
+            key: '1',
+            label: 'Action 1',
+            icon: <span>icon1</span>,
+            tooltip: {
+              title: 'Custom Title',
+              placement: 'bottom',
+              color: 'blue',
+            },
+          },
+        ]}
+      />,
+    );
+    const trigger = container.querySelector('.ant-actions-icon')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.textContent).toBe('Custom Title');
+  });
+
+  it('does not render tooltip when tooltip is false', async () => {
+    const { container } = render(
+      <Actions
+        items={[
+          {
+            key: '1',
+            label: 'Action 1',
+            icon: <span>icon1</span>,
+            tooltip: false,
+          },
+        ]}
+      />,
+    );
+    const trigger = container.querySelector('.ant-actions-icon')!;
+    fireEvent.mouseEnter(trigger);
+    await waitFakeTimer();
+    const tooltip = document.querySelector('.ant-tooltip');
+    expect(tooltip).not.toBeInTheDocument();
+  });
+});
+
 describe('Actions.Menu findItem function', () => {
   const items = [
     { key: '1', label: 'Action 1' },

packages/x/components/actions/demo/tooltip.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义每个操作项的 Tooltip，支持传入字符串、TooltipProps 或 `false` 关闭。
+
+## en-US
+
+Customize the Tooltip of each action item, supports string, TooltipProps, or `false` to disable.

packages/x/components/actions/demo/tooltip.tsx

@@ -0,0 +1,39 @@
+import { EditOutlined, RedoOutlined } from '@ant-design/icons';
+import { Actions } from '@ant-design/x';
+import React from 'react';
+
+const App: React.FC = () => {
+  return (
+    <Actions
+      items={[
+        {
+          key: 'retry',
+          icon: <RedoOutlined />,
+          label: 'Retry',
+          // Custom tooltip text
+          tooltip: 'Click to retry',
+        },
+        {
+          key: 'edit',
+          icon: <EditOutlined />,
+          label: 'Edit',
+          // Custom tooltip props (e.g. placement, color)
+          tooltip: {
+            title: 'Edit content',
+            placement: 'bottom',
+            color: 'blue',
+          },
+        },
+        {
+          key: 'share',
+          icon: <EditOutlined />,
+          label: 'Share',
+          // Disable tooltip
+          tooltip: false,
+        },
+      ]}
+    />
+  );
+};
+
+export default App;