按需加载tooltip

前言：

在日常开发中，我们会遇到对一段文字如果太长，需要用省略号来表示，但是如果省略后，文字的完整内容就显示不出来了。这事，一般采用tooltip 的方式来显示完整，但是有时，可以显示完全，若还是用tooltip 来显示就有些多余了，所以如何按需显示tooltip 就显得尤为重要了，接下来，我们就一起探寻一下如何实现按需显示tooltip。

具体模块实现：

useTooltipShow.ts

 

import { useEffect, useRef, useState } from 'react';

// tooltip 按需显示
export const useTooltipShow = (text: string, sortType = '', more = false) => {
  const [tooltipEnable, setTooltipEnable] = useState(false);
  const textRef = useRef<HTMLSpanElement>(null);

  // tooltipEnable 判断
  useEffect(() => {
    const scrollWidth = textRef?.current?.scrollWidth ?? 0;
    const offsetWidth = textRef?.current?.offsetWidth ?? 0;
    if (scrollWidth > offsetWidth) {
      setTooltipEnable(true);
    } else {
      setTooltipEnable(false);
    }
  }, [text, sortType, more]);

  return { tooltipEnable, textRef };
};

使用方法：

import { useTooltipShow } from '../../../hooks/useTooltipShow';

const { tooltipEnable, textRef } = useTooltipShow(name);
 

方案优化，有的时候，我们对展示层所依赖的变量无法获得，所以也可以采用以下方案：

ResizeObserver 来监听对应区域的变化，从而设置tooltip

const resizeObserver = new ResizeObserver(entries => {
      const scrollWidth =  textRef.current?.scrollWidth ?? 0;
      const offsetWidth =  textRef.current?.offsetWidth ?? 0;
      if (scrollWidth > offsetWidth) {
        this.showTooltip = true;
      } else {
      this.showTooltip = false;
      }
    });

resizeObserver.observe(textRef.current)