React show Material-UI工具提示仅适用于带有省略号的文本 [英] React show Material-UI Tooltip only for text that has ellipsis

问题描述

寻找一种方法，让Material-ui的工具提示在表单元格 中扩展文本，如果文本被省略号(溢出)切除.

Looking for a way to have material-ui's tooltip expand the text in a table cell ONLY if the text is cut off with an ellipsis (overflowing).

当前在我的表格中，我有一个像这样的单元格:

Currently in my table I have a cell like this:

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

我对descriptionCell的样式是这样的:

and my styling for descriptionCell is like this:

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

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

This makes the text behave the way I would like it to in this table, but I want to be able to hover and view the rest of it in a tooltip, preferably Material-UI's built in tooltip component.

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

I know there is a package that exists here https://www.npmjs.com/package/react-ellipsis-with-tooltip which should do this, BUT it uses bootstrap tooltip, not material UI.

推荐答案

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

Please find the codesandbox below - https://codesandbox.io/s/material-demo-p2omr

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

I am using ref here to get the TableCell DOM Node and then comparing the scrollWidth and clientWidth to determine if Tooltip has to be displayed.(This is based on answer here)

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

I have added "rowref" (property that has the ref) and "open" (disable/enable tooltip) as new properties to the rows. I don't know where your data is coming from, but I am assuming you can add these properties to the row.

要注意的另一件事，我仅将"disableHoverListener"属性设置为禁用工具提示.还有其他道具-"disableFocusListener"& "disableTouchListener"，如果您想使用它们.更多信息此处

One more thing to note, I am only setting "disableHoverListener" prop to disable tooltip . There are other props - "disableFocusListener" & "disableTouchListener" , If you want to use those. More info here

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

Hope this works out for you. Let me know if you have any doubts in the code.

这篇关于React show Material-UI工具提示仅适用于带有省略号的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！