diff --git a/frontend/src/components/TextToolTip/TextToolTip.test.tsx b/frontend/src/components/TextToolTip/TextToolTip.test.tsx
new file mode 100644
index 0000000000..65192cf001
--- /dev/null
+++ b/frontend/src/components/TextToolTip/TextToolTip.test.tsx
@@ -0,0 +1,53 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
+import TextToolTip from './index';
+
+describe('TextToolTip', () => {
+	const tooltipText = 'Tooltip Text';
+
+	it('displays the tooltip when hovering over the icon', async () => {
+		const { getByRole, getByText } = render(<TextToolTip text="Tooltip Text" />);
+		const icon = getByRole('img');
+		fireEvent.mouseOver(icon);
+
+		await waitFor(() => {
+			const tooltip = getByText(tooltipText);
+			expect(tooltip).toBeInTheDocument();
+		});
+	});
+
+	it('renders the tooltip content correctly', async () => {
+		const { getByRole, getByText } = render(
+			<TextToolTip text="Tooltip Text" url="https://example.com" />,
+		);
+		const icon = getByRole('img');
+		fireEvent.mouseOver(icon);
+
+		await waitFor(() => {
+			const tooltip = getByText(tooltipText);
+			const link = getByText('here');
+			expect(tooltip).toBeInTheDocument();
+			expect(link).toHaveAttribute('href', 'https://example.com');
+			expect(link).toHaveAttribute('target', '_blank');
+		});
+	});
+
+	it('does not display the tooltip by default', () => {
+		const { queryByText } = render(<TextToolTip text="Tooltip Text" />);
+		const tooltip = queryByText(tooltipText);
+		expect(tooltip).toBeNull();
+	});
+
+	it('opens the URL in a new tab when clicked', async () => {
+		const { getByRole } = render(
+			<TextToolTip text="Tooltip Text" url="https://example.com" />,
+		);
+		const icon = getByRole('img');
+		fireEvent.mouseOver(icon);
+		await waitFor(() => {
+			const link = getByRole('link');
+			expect(link).toHaveAttribute('href', 'https://example.com');
+			expect(link).toHaveAttribute('target', '_blank');
+		});
+	});
+});