使用场景

• 仅支持antd版本在5.16.0的情况下使用：原因是这个版本的Typography才支持tooltip属性
• ProTable组件明明使用了ellipsis：true，但是使用render后，Tooltip失效

为什么ProTable使用render后，Tooltip失效

了解组件内部如何实现内容超出才显示Tooltip

找到render不显示Tooltip的逻辑

结论

我们发现，这个组件内部实现超出显示Tooltip的逻辑，底层就是使用Antd中Typography.Paragraph实现的，不需要根据内容宽度和可视区域宽度判断，下面我们直接封装一个小组件实现。

Tooltip省略组件

我们的目标是使用这个组件就像是使用Antd中Tooltip组件一样的简单，把原有的api暴露出来

需求

原有的Tooltip组件包裹内容，无论内容是否超出宽度，都会显示Tooltip，但期望效果是只有内容超出时才会显示Tooltip，而且过多的Tooltip也会影响性能，所以非必要不添加

index.tsx代码

import { Typography, type TooltipProps } from 'antd'
import classNames from 'classnames/bind'
import styles from './index.module.scss'
import type { ReactNode } from 'react'

const cx = classNames.bind(styles)

type Props = {
  children?: ReactNode
  url?: string
  width?: number | string
  className?: string
} & Omit<TooltipProps, 'children'>

export const EllipsisTooltip = ({
  title,
  url,
  children,
  width = '100%',
  className,
  style,
  ...props
}: Props) => {
  let child = children || (typeof title === 'function' ? title() : title) || '-'
  if (url) {
    child = (
      <a href={url} target="_blank" rel="noreferrer">
        {child}
      </a>
    )
  }
  return (
    <Typography.Paragraph
      className={cx('ellipsis', className)}
      style={{
        width,
        margin: 0,
        padding: 0,
        ...style,
      }}
      ellipsis={{ tooltip: { title, ...props } }}
    >
      {child}
    </Typography.Paragraph>
  )
}

 使用方法

可以根据Tooltip的使用方式，自己拓展使用，这里只是举了个简单的例子

<EllipsisTooltip title={title}>{content}</EllipsisTooltip>