ArcoDesign 中，我发现了一个未开放的宝藏组件 AutoTooltip

正常情况下，使用了 Tooltip，无论如何，鼠标悬浮时，都会显示出来 Tooltip。

项目中有这样一个待优化项：

当文字显示不全时，显示 Tooltip。能显示全时，无需显示 Tooltip

ArcoDesign 中的 AutoTooltip

第一反应： a-table 组件里不是有这个东西吗？

于是我在 a-table 源码中找到了这么一个组件： auto-tooltip，

路径是 arco-design-vue\packages\web-vue\components\_components\auto-tooltip\auto-tooltip.tsx

AutoTooltip 的用法

手动给 AutoTooltip 设置一个宽度。当它包裹的内容长度大于这个宽度时，Tooltip 才会显示

import AutoTooltip from '@arco-design/web-vue/es/_components/auto-tooltip/auto-tooltip';

<AutoTooltip style="max-width: 250px">
    <span>
      这段文字很长，理论上200px的宽度是显示不下的，此时 Tooltip 会显示出来
    </span>
</AutoTooltip>

AutoTooltip 的原理

核心逻辑如下，通过判断 showTooltip 的值，返回不同的 Dom。如果需要显示 Tooltip，返回一个外层套了 Tooltip 的 Dom

return () => {
  if (showTooltip.value) {
    return (
      <Tooltip
        content={text.value}
        onResize={onResize}
        {...props.tooltipProps}
      >
        {renderContent()}
      </Tooltip>
    );
  }

  return (
    <ResizeObserver onResize={onResize}>{renderContent()}</ResizeObserver>
  );
};

showTooltip 的值是如何判断的呢？ 说白了，就是比较 父组件的宽度 和 子组件的宽度 谁更大。

如果 子组件的宽度 > 父组件的宽度，说明显示不下了，这时候需要显示 Tooltip

if (containerRef.value && contentRef.value) {
  // 比较
  const _show = contentRef.value.offsetWidth > containerRef.value.offsetWidth;
  if (_show !== showTooltip.value) {
    showTooltip.value = _show;
  }
}

后记

个人感觉这个组件还是挺好用的，不知道为什么官方没有把它放出来，难道有坑？

反正我们项目里是用上了，还是挺香的。