In React code, I have constant-sized divs with dynamic data rendered in them. Often data is too long and overflows. Is there some way to detect when content is overflowing so that I can conditionally apply a tooltip on the content?

CodePudding user response：

You can check for scrollWidth and scrollHeight if those are higher than clientWidth and clientHeight.

In React.js you should place that in useLayoutEffect to give a browser chance to paint that tooltip automatically without jumping effect.

CodePudding user response：

compare the offsetWidth and the width of your div