From 9383b6576d3e287b6aff8ae66980ea3ae12a0ed5 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Fri, 16 May 2025 16:46:19 +0530
Subject: [PATCH] feat: added variable description icon and details on tooltip
 (#7897)

---
 .../DashboardVariableSelection.styles.scss                | 5 +++++
 .../DashboardVariablesSelection/VariableItem.tsx          | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
index 6df3e79906..6eaffb7e9d 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
@@ -18,6 +18,11 @@
 		font-style: normal;
 		font-weight: 400;
 		line-height: 16px; /* 133.333% */
+
+		.info-icon {
+			margin-left: 4px;
+			color: var(--bg-vanilla-400);
+		}
 	}
 
 	.variable-value {
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index f470eac26e..00a1bc371d 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -7,7 +7,7 @@
 import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
-import { WarningOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
 import {
 	Checkbox,
 	Input,
@@ -405,7 +405,13 @@ function VariableItem({
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
 				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
+						<InfoCircleOutlined className="info-icon" />
+					</Tooltip>
+				)}
 			</Typography.Text>
+
 			<div className="variable-value">
 				{variableData.type === 'TEXTBOX' ? (
 					<Input