diff --git a/frontend/src/components/TextToolTip/TextToolTip.style.scss b/frontend/src/components/TextToolTip/TextToolTip.style.scss
new file mode 100644
index 0000000000..192d98264c
--- /dev/null
+++ b/frontend/src/components/TextToolTip/TextToolTip.style.scss
@@ -0,0 +1,3 @@
+.overlay--text-wrap {
+    white-space: pre-wrap;
+}
\ No newline at end of file
diff --git a/frontend/src/components/TextToolTip/TextToolTip.tsx b/frontend/src/components/TextToolTip/TextToolTip.tsx
new file mode 100644
index 0000000000..6c8fad783e
--- /dev/null
+++ b/frontend/src/components/TextToolTip/TextToolTip.tsx
@@ -0,0 +1,89 @@
+import './TextToolTip.style.scss';
+
+import { blue, grey } from '@ant-design/colors';
+import {
+	QuestionCircleFilled,
+	QuestionCircleOutlined,
+} from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { style } from './constant';
+
+function TextToolTip({
+	text,
+	url,
+	useFilledIcon = true,
+	urlText,
+}: TextToolTipProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	const onClickHandler = (
+		event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+	): void => {
+		event.stopPropagation();
+	};
+
+	const overlay = useMemo(
+		() => (
+			<div className="overlay--text-wrap">
+				{`${text} `}
+				{url && (
+					<a
+						// Stopping event propagation on click so that parent click listener are not triggered
+						onClick={onClickHandler}
+						href={url}
+						rel="noopener noreferrer"
+						target="_blank"
+					>
+						{urlText || 'here'}
+					</a>
+				)}
+			</div>
+		),
+		[text, url, urlText],
+	);
+
+	const iconStyle = useMemo(
+		() => ({
+			...style,
+			color: isDarkMode ? themeColors.whiteCream : grey[0],
+		}),
+		[isDarkMode],
+	);
+
+	const iconOutlinedStyle = useMemo(
+		() => ({
+			...style,
+			color: isDarkMode ? themeColors.navyBlue : blue[6],
+		}),
+		[isDarkMode],
+	);
+
+	return (
+		<Tooltip getTooltipContainer={popupContainer} overlay={overlay}>
+			{useFilledIcon ? (
+				<QuestionCircleFilled style={iconStyle} />
+			) : (
+				<QuestionCircleOutlined style={iconOutlinedStyle} />
+			)}
+		</Tooltip>
+	);
+}
+
+TextToolTip.defaultProps = {
+	url: '',
+	urlText: '',
+	useFilledIcon: true,
+};
+interface TextToolTipProps {
+	url?: string;
+	text: string;
+	useFilledIcon?: boolean;
+	urlText?: string;
+}
+
+export default TextToolTip;
diff --git a/frontend/src/components/TextToolTip/styles.ts b/frontend/src/components/TextToolTip/constant.ts
similarity index 100%
rename from frontend/src/components/TextToolTip/styles.ts
rename to frontend/src/components/TextToolTip/constant.ts
diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx
index 72f631a872..c40a841fd0 100644
--- a/frontend/src/components/TextToolTip/index.tsx
+++ b/frontend/src/components/TextToolTip/index.tsx
@@ -1,87 +1,3 @@
-import { blue, grey } from '@ant-design/colors';
-import {
-	QuestionCircleFilled,
-	QuestionCircleOutlined,
-} from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { themeColors } from 'constants/theme';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useMemo } from 'react';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { style } from './styles';
-
-function TextToolTip({
-	text,
-	url,
-	useFilledIcon = true,
-	urlText,
-}: TextToolTipProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	const onClickHandler = (
-		event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-	): void => {
-		event.stopPropagation();
-	};
-
-	const overlay = useMemo(
-		() => (
-			<div>
-				{`${text} `}
-				{url && (
-					<a
-						// Stopping event propagation on click so that parent click listener are not triggered
-						onClick={onClickHandler}
-						href={url}
-						rel="noopener noreferrer"
-						target="_blank"
-					>
-						{urlText || 'here'}
-					</a>
-				)}
-			</div>
-		),
-		[text, url, urlText],
-	);
-
-	const iconStyle = useMemo(
-		() => ({
-			...style,
-			color: isDarkMode ? themeColors.whiteCream : grey[0],
-		}),
-		[isDarkMode],
-	);
-
-	const iconOutlinedStyle = useMemo(
-		() => ({
-			...style,
-			color: isDarkMode ? themeColors.navyBlue : blue[6],
-		}),
-		[isDarkMode],
-	);
-
-	return (
-		<Tooltip getTooltipContainer={popupContainer} overlay={overlay}>
-			{useFilledIcon ? (
-				<QuestionCircleFilled style={iconStyle} />
-			) : (
-				<QuestionCircleOutlined style={iconOutlinedStyle} />
-			)}
-		</Tooltip>
-	);
-}
-
-TextToolTip.defaultProps = {
-	url: '',
-	urlText: '',
-	useFilledIcon: true,
-};
-interface TextToolTipProps {
-	url?: string;
-	text: string;
-	useFilledIcon?: boolean;
-	urlText?: string;
-}
+import TextToolTip from './TextToolTip';
 
 export default TextToolTip;