Реагировать на всплывающую подсказку «Материал-пользовательский интерфейс» только для текста с многоточием

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, который должен сделать это, НО использует всплывающую подсказку, а не пользовательский интерфейс материала.

Answer 1

Пожалуйста, найдите коды и поле ниже - https://codesandbox.io/s/material-demo-p2omr

Я использую ref здесь, чтобы получить DOM-узел TableCell, а затем сравниваю scrollWidth и clientWidth, чтобы определить, должна ли отображаться подсказка. (Это основано на ответе здесь )

Я добавил «rowref» (свойство, имеющее ссылку) и «open» (отключить / включить подсказку) в качестве новых свойств для строк. Я не знаю, откуда поступают ваши данные, но я предполагаю, что вы можете добавить эти свойства в строку.

Еще одна вещь, которую стоит отметить, я только устанавливаю опору «disableHoverListener» для отключения всплывающей подсказки. Есть и другие реквизиты - «disableFocusListener» и «disableTouchListener», если вы хотите их использовать. Подробнее здесь

Надеюсь, это сработает для вас. Дайте мне знать, если у вас есть какие-либо сомнения в коде.