Блог

Главная - Вопросы по программированию - Как отобразить всплывающую подсказку Material-UI в таблице только в том случае, если данные столбца превышают ширину столбца?

Как отобразить всплывающую подсказку Material-UI в таблице только в том случае, если данные столбца превышают ширину столбца?

#reactjs #material-ui

Вопрос:

Я использую всплывающую подсказку Material-ui и хочу отображать всплывающую подсказку только тогда, когда данные столбца превышают ширину столбца.

Я выполнил реализацию, но всплывающая подсказка появляется через несколько секунд при наведении курсора мыши на столбец. Раньше он приходил очень быстро, когда я показывал его в каждом столбце, независимо от длины данных, но теперь он немного замедляется при наведении курсора.

Я прикрепляю прослушиватель к каждому столбцу и вызываю showTooltip функцию

 const [tooltip, hideTooltip] = useState(true);

useEffect(() => {
   const hovers = document.querySelectorAll('.columnClass');
   hovers.forEach(hover => {
      hover.addEventListener('mouseover', (e) => showTooltip(e));
   })
}, []);

Здесь я вычисляю, превышает ли длина данных ширину столбца, и соответствующим образом обновляю состояние.

 const showTooltip = (e) => {
    if (e.target.offsetWidth < e.target.scrollWidth) {
        hideTooltip(true);
    } else {
        hideTooltip(false);
    }
}

Здесь, используя тернарный оператор, я проверяю, превышают ли данные столбец, затем я показываю подсказку, иначе я возвращаю столбец без подсказки

 return (
    tooltip ? <Tooltip 
        disableFocusListener 
        title={tooltipText}
        arrow
        placement="top"
    >
        <Box className={classes.addEllipsis}>{cellContent}</Box>
    </Tooltip> : <Box>{cellContent}</Box>
);

Может кто-нибудь, пожалуйста, объяснить, где я делаю это неправильно, что вызывает задержку всплывающей подсказки?

Метки: ,