TextWithTooltip = ({
	style, className, title, innerHTML,
}) => {
	const containerRef = useRef(null);
	const contentRef = useRef(null);
	const [isOverflowing, setIsOverflowing] = useState(false);

	useEffect(() => {
		const container = containerRef.current;
		const content = contentRef.current;

		if (container && content) {
			const containerWidth = container.offsetWidth;
			const contentWidth = content.scrollWidth;

			setIsOverflowing(contentWidth > containerWidth);
		}
	}, [innerHTML, title]);

	return (
		<Container title={isOverflowing ? title : ''} ref={containerRef} >
			<Content
				className={className}
				style={style}
				isOverflowing={isOverflowing}
				ref={contentRef}
				dangerouslySetInnerHTML={{
					__html: innerHTML,
				}}
			/>
		</Container>
	);
}
Shows tooltip when text content overflows out of the container