Question

如果Material-ui的工具提示使用省略号（溢出）将其截去，则寻找一种方法来扩展表单元格中的文本。。

>

当前在我的桌子上有一个像这样的单元格：

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

我对descriptionCell的样式是这样的：

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

这使文本的行为与我在此表中所希望的一样，但是我希望能够在工具提示（最好是Material-UI的内置工具提示组件）中悬停并查看其余文本。

我知道https://www.npmjs.com/package/react-ellipsis-with-tooltip这里有一个应该执行此操作的程序包，但是它使用引导程序工具提示，而不是实质性的UI。

Answer 1

我今天也遇到了同样的问题，@ 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>
        );
    }
}

用法示例：

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

一个令人讨厌的事情是，如果元素的空间在页面中动态变化（例如页面调整大小或动态DOM变化），它将不会确认新空间并重新计算它是否溢出。

其他工具提示库（例如Tippy）具有尝试打开工具提示时触发的方法。这是进行溢出检查的理想场所，因为它始终可以工作，而不管文本元素的DOM宽度是否已更改。不幸的是，使用Material UI提供的API可以做到这一点。

Answer 2

放弃@ benjamin.keen的答案。这是一个独立的功能组件，只是他使用钩子执行比较功能的答案的扩展。

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

  useEffect(() => compareSize());

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

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

  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;

Answer 3

请在下面找到代码和框-https://codesandbox.io/s/material-demo-p2omr

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

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

要注意的另一件事，我仅将“ disableHoverListener”属性设置为禁用工具提示。还有其他道具-“ disableFocusListener”和“ disableTouchListener”，如果要使用的话。更多信息here

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

Answer 4

基于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>
  );
};

Answer 5

基于@Dheeraj的答案-这与他的组件非常接近，但在脚本类型中更有意义，道具名称更有意义：

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;

我们这样使用它：

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

React show Material-UI工具提示仅适用于带有省略号的文本

5 个答案: