feat(table): add tooltip props

src/descriptions/index.tsx

@@ -12,6 +12,7 @@
 import ProSkeleton from '../skeleton';
 import type {
   ProCoreActionType,
+  ProEllipsis,
   ProFieldValueType,
   ProSchema,
   ProSchemaComponentTypes,
@@ -64,7 +65,7 @@
     hide?: boolean;
     plain?: boolean;
     copyable?: boolean;
-    ellipsis?: boolean | { showTitle?: boolean };
+    ellipsis?: ProEllipsis;
     mode?: ProFieldFCMode;
     children?: React.ReactNode;
     /**
@@ -327,14 +328,14 @@
         };
       }
       const {
         valueEnum,
         render,
         renderText,
         mode,
         plain,
         dataIndex,
         request,
         params,
         editable,
         ...restItem
       } = item as ProDescriptionsItemProps;

src/table/typing.ts

@@ -22,6 +22,7 @@ import type {
 } from '../form';
 import type {
   ProCoreActionType,
+  ProEllipsis,
   ProSchema,
   ProSchemaComponentTypes,
   ProTableEditableFnType,
@@ -118,7 +119,7 @@ export type ProColumnType<T = unknown, ValueType = 'text'> = ProSchema<
     initialValue?: any;
 
     /** @name 是否缩略 */
-    ellipsis?: ColumnType<T>['ellipsis'];
+    ellipsis?: ProEllipsis;
     /** @name 是否拷贝 */
     copyable?: boolean;
 

src/utils/components/LabelIconTip/index.tsx

@@ -6,6 +6,7 @@ import type {
 } from 'antd/lib/form/FormItemLabel';
 import { clsx } from 'clsx';
 import React, { useContext } from 'react';
+import type { ProEllipsis } from '../../genCopyable';
 import { useStyle } from './style';
 
 /**
@@ -17,7 +18,7 @@ export const LabelIconTip: React.FC<{
   label: React.ReactNode;
   subTitle?: React.ReactNode;
   tooltip?: string | LabelTooltipType;
-  ellipsis?: boolean | { showTitle?: boolean };
+  ellipsis?: ProEllipsis;
 }> = React.memo((props) => {
   const { label, tooltip, ellipsis, subTitle } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);

src/utils/genCopyable/index.tsx

@@ -1,6 +1,15 @@
+import type { TooltipProps } from 'antd';
 import { Typography } from 'antd';
+import isObject from 'lodash-es/isObject';
 import React from 'react';
 
+export type ProEllipsisTooltip = {
+  showTitle?: boolean;
+  tooltip?: TooltipProps;
+};
+
+export type ProEllipsis = { ellipsis?: ProEllipsisTooltip } | boolean;
+
 const isNeedTranText = (item: any): boolean => {
   if (item?.valueType?.toString().startsWith('date')) {
     return true;
@@ -11,11 +20,10 @@ const isNeedTranText = (item: any): boolean => {
   return false;
 };
 
-const getEllipsis = (item: any) => {
+const getEllipsis = (item: any): ProEllipsisTooltip | boolean => {
   if (item.ellipsis?.showTitle === false) {
     return false;
   }
-
   return item.ellipsis;
 };
 
@@ -26,19 +34,32 @@ const normalizeCopyText = (text: unknown) => {
 };
 
 const genEllipsis = (dom: React.ReactNode, item: any, text: string) => {
+  const ellipsis = getEllipsis(item);
+  if (!ellipsis || !text) {
+    return false;
+  }
   /** 有些 valueType 需要设置copy的为string */
   const needTranText = isNeedTranText(item);
-  return getEllipsis(item) && text
-    ? {
-        tooltip:
-          // 支持一下 tooltip 的关闭
-          item?.tooltip !== false && needTranText ? (
-            <div className="pro-table-tooltip-text">{dom}</div>
-          ) : (
-            text
-          ),
-      }
-    : false;
+
+  // 支持一下 tooltip 的关闭
+  if (needTranText && item?.tooltip !== false) {
+    return {
+      tooltip: <div className="pro-table-tooltip-text">{dom}</div>,
+    };
+  }
+
+  // 如果 ellipsis 是对象且包含 tooltip 属性,合并 tooltip 的属性
+  if (isObject(ellipsis) && isObject(ellipsis.tooltip)) {
+    return {
+      tooltip: {
+        title: text,
+        ...ellipsis.tooltip,
+      },
+    };
+  }
+  return {
+    tooltip: text,
+  };
 };
 
 /**

src/utils/index.tsx

@@ -55,6 +55,7 @@ import { objectToMap, proFieldParsingText } from './proFieldParsingText';
 import { runFunction } from './runFunction';
 import stringify from './stringify';
 import { transformKeySubmitValue } from './transformKeySubmitValue';
+import type { ProEllipsis } from './genCopyable';
 import type {
   RowEditableConfig,
   RowEditableType,
@@ -134,6 +135,7 @@ export {
   useStyle,
 };
 export type {
+  ProEllipsis,
   ProFormInstanceType,
   ProRequestData,
   RowEditableConfig,