Reactjs 仅对带有省略号的文本显示材质UI工具提示

正在寻找让材质ui的工具提示仅在文本被省略号（溢出）截断时才展开表格单元格中的文本的方法

目前在我的表格中，我有一个如下的单元格：

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

<OverflowTooltip 
    tooltip={'tooltip message here'}
    text={'very long text here'}
/>

这使文本的行为方式与我希望它在此表中的方式相同，但我希望能够悬停并在工具提示中查看其其余部分，最好是材质UI的内置工具提示组件

---

我知道这里有一个包可以做到这一点，但它使用的是引导工具提示，而不是材质UI。

请查找下面的代码沙盒-

我在这里使用ref获取TableCell DOM节点，然后比较scrollWidth和clientWidth，以确定是否必须显示工具提示。（这是基于答案）

我已将“rowref”（具有ref的属性）和“open”（禁用/启用工具提示）作为新属性添加到行中。我不知道您的数据来自哪里，但我假设您可以将这些属性添加到行中

还有一件事需要注意，我只是将“disableHoverListener”属性设置为禁用工具提示。如果你想使用这些道具，还有其他道具——“disableFocusListener”和“disableTouchListener”。更多信息

---

希望这对你有用。如果您对代码有任何疑问，请告诉我。

我今天遇到了同样的问题，@vijay menon的回答非常有用。下面是一个简单的独立组件：

import React, { Component } from 'react';
import Tooltip from '@material-ui/core/Tooltip';

class OverflowTip extends Component {
    constructor(props) {
        super(props);
        this.state = {
            overflowed: false
        };
        this.textElement = React.createRef();
    }

    componentDidMount () {
        this.setState({
            isOverflowed: this.textElement.current.scrollWidth > this.textElement.current.clientWidth
        });
    }

    render () {
        const { isOverflowed } = this.state;
        return (
            <Tooltip
                title={this.props.children}
                disableHoverListener={!isOverflowed}>
                <div
                    ref={this.textElement}
                    style={{
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis'
                    }}>
                    {this.props.children}
                </div>
            </Tooltip>
        );
    }
}

import React，{Component}来自'React'；
从“@material ui/core/Tooltip”导入工具提示；
类溢出提示扩展组件{
建造师（道具）{
超级（道具）；
此.state={
溢出：错误
};
this.textElement=React.createRef（）；
}
组件安装（）{
这是我的国家({
IsOverflow:this.textElement.current.scrollWidth>this.textElement.current.clientWidth
});
}
渲染（）{
const{isOverflowed}=this.state；
返回(
{this.props.children}
);
}
}

用法示例：

<OverflowTip>
      some long text here that may get truncated based on space
</OverflowTip>

此处的一些长文本可能会因空格而被截断

一个麻烦是，如果元素的空间在页面中动态更改（例如页面大小或动态DOM更改），它将不会确认新空间并重新计算是否溢出

---

其他工具提示库（如Tippy）有一个在尝试打开工具提示时触发的方法。这是执行溢出检查的最佳位置，因为无论文本元素的DOM宽度是否已更改，溢出检查始终有效。不幸的是，使用Material UI提供的API来实现这一点更麻烦。

要离开@benjamin.keen answer。这是一个独立的功能组件，它只是他的答案的一个扩展，使用钩子来执行比较功能

import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
const OverflowTip = props => {
  // Create Ref
  const textElementRef = useRef();

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    console.log('compare: ', compare);
    setHover(compare);
  };

  // compare once and add resize listener on "componentDidMount"
  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  // remove resize listener again on "componentWillUnmount"
  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  // Define state and function to update the value
  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.value}
      interactive
      disableHoverListener={!hoverStatus}
      style={{fontSize: '2em'}}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        }}
      >
        {props.someLongText}
      </div>
    </Tooltip>
  );
};

export default OverflowTip;

import React，{useRef，useffect，useState}来自'React'；
从“@material ui/core/Tooltip”导入工具提示；
const OverflowTip=props=>{
//创建引用
const textElementRef=useRef（）；
const compareSize=（）=>{
常数比较=
textElementRef.current.scrollWidth>textElementRef.current.clientWidth；
log（'compare:'，compare）；
设置悬停（比较）；
};
//比较一次并在“componentDidMount”上添加调整大小侦听器
useffect（（）=>{
比较（）；
window.addEventListener（'resize'，compareSize）；
}, []);
//在“componentWillUnmount”上再次删除调整侦听器大小
使用效果（（）=>（）=>{
removeEventListener（'resize'，compareSize'）；
}, []);
//定义状态和函数以更新值
const[hoverStatus，setHover]=useState（false）；
返回(
{props.someLongText}
);
};
导出默认溢出提示；

基于benjamin.keen的回答，这是他的代码的功能版本：

import React, { useRef, useState, useEffect } from 'react';
import Tooltip from '@material-ui/core/Tooltip';

const OverflowTip = ({ children }) => {
  const [isOverflowed, setIsOverflow] = useState(false);
  const textElementRef = useRef();
  useEffect(() => {
    setIsOverflow(textElementRef.current.scrollWidth > textElementRef.current.clientWidth);
  }, []);
  return (
    <Tooltip title={children} disableHoverListener={!isOverflowed}>
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {children}
      </div>
    </Tooltip>
  );
};

import React，{useRef，useState，useffect}来自'React'；
从“@material ui/core/Tooltip”导入工具提示；
常量溢出提示=（{children}）=>{
const[IsOverflow，setIsOverflow]=useState（false）；
const textElementRef=useRef（）；
useffect（（）=>{
setIsOverflow（textElementRef.current.scrollWidth>textElementRef.current.clientWidth）；
}, []);
返回(
{儿童}
);
};

基于@Dheeraj-answer-这是一个非常接近他的组件，但在类型脚本版本和更多版本中有意义的道具名称：

import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';

interface Props {
  tooltip: string;
  text: string;
}

const OverflowTooltip = (props: Props) => {

  const textElementRef = useRef<HTMLInputElement | null>(null);

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    setHover(compare);
  };

  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.tooltip}
      interactive
      disableHoverListener={!hoverStatus}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {props.text}
      </div>
    </Tooltip>
  );
};

export default OverflowTooltip;

import React，{useRef，useffect，useState}来自'React'；
从“@material ui/core/Tooltip”导入工具提示；
界面道具{
工具提示：字符串；
文本：字符串；
}
常量溢出工具提示=（道具：道具）=>{
const textElementRef=useRef（null）；
const compareSize=（）=>{
常数比较=
textElementRef.current.scrollWidth>textElementRef.current.clientWidth；
设置悬停（比较）；
};
useffect（（）=>{
比较（）；
window.addEventListener（'resize'，compareSize）；
}, []);
使用效果（（）=>（）=>{
removeEventListener（'resize'，compareSize'）；
}, []);
const[hoverStatus，setHover]=useState（false）；
返回(
{props.text}
);
};
导出默认溢出工具提示；

我们这样使用它：

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

<OverflowTooltip 
    tooltip={'tooltip message here'}
    text={'very long text here'}
/>

这将无条件执行工具提示。问题是如何在文本溢出时才有工具提示。@RyanCogswell是的，没错。只有当文本溢出时才需要它，而不是一直都需要。如果还没有，我会在问题中说得更清楚。我对这个要求理解不正确。我已经删除了我原来的答案，并添加了一个新的答案。让我知道这是否有效。@dave99collins，请让我知道这是否对您有效。这里是一个起点：您应该通过从第一个钩子返回

（）=>{window.removeEventListener（'resize'，compareSize）；}

将

useffect

钩子组合成一个钩子。这可能会使