Rocket.Chat/client/components/TooltipComponent.tsx

import { Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
import React, { ReactElement, ReactNode, useRef } from 'react';

type TooltipComponentProps = {
	title: ReactNode;
	anchor: Element;
};

export const TooltipComponent = ({ title, anchor }: TooltipComponentProps): ReactElement => {
	const ref = useRef(anchor);

	return (
		<PositionAnimated
			anchor={ref}
			placement='top-middle'
			margin={8}
			visible={AnimatedVisibility.UNHIDING}
		>
			<Tooltip>{title}</Tooltip>
		</PositionAnimated>
	);
};

export default TooltipComponent;