#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>
);
Может кто-нибудь, пожалуйста, объяснить, где я делаю это неправильно, что вызывает задержку всплывающей подсказки?