React 仅针对具有省略号的文本显示 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:我的 descriptionCell 样式是这样的:
<TableCell className={classes.descriptionCell}>{row.description}</TableCell>
and my styling for descriptionCell is like this:这使得文本在此表格中表现得如我所愿，但我希望能够悬停并在工具提示中查看其余部分，最好是 Material-UI 的内置工具提示组件.
descriptionCell: {
whiteSpace: 'nowrap',
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
我知道这里有一个包 https://www.npmjs.com/package/react-ellipsis-with-tooltip 应该这样做，但它使用引导工具提示，而不是材料 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.
推荐答案
离开@benjamin.keen 的回答.这是一个独立的功能组件，它只是他使用钩子执行比较功能的答案的扩展.
To go off of @benjamin.keen answer. Here is a standalone functional component which is just an extension of his answer using hooks to perform the comparison functions.</工具提示>);};导出默认溢出提示；
这篇关于React 仅针对具有省略号的文本显示 Material-UI 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
