I am using Chakra UI (Tooltip and the ellipsis) I have added the Tooltip to show the label on the title completely but I ONLY want to show the Tooltip when ellipsis is activated!
For example, in normal situation I do not want the Tooltip component on the text but only when there is ellipsis.
I appreciate your help, thank you
<Tooltip label="this is an example for a long text">
<Text
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
this is an example for a long text
</Text>
</Tooltip>
You can see this answer: HTML text-overflow ellipsis detection
function isEllipsisActive(element) {
return (element.offsetWidth < element.scrollWidth);
}
Then, you can decide to show the Tooltip component based on the result of that function.
const textRef = useRef()
<Text ref={textRef}/>
{isEllipsisActive(textRef) && (<Tooltip></Tooltip)}