I have this code:

<Tooltip
      title={
            <div>{Small description}</div>
        }
    >
        <Stack>
            <StyleOptionImage/>
            <Typography
                noWrap
            >
                {Tittle}
            </Typography>
            <Typography
                noWrap
            >
                {Description}
            </Typography>
        </Stack>
</Tooltip>

Due to the noWrap attribute if the value is true, the text will not wrap, but instead will truncate with a text overflow ellipsis. And that is the expected behaviour.

I need to display the tooltip if and only if the the world is truncated, and it has to dynamically update, depending on the size of the screen, too.