From 8d00e2fde54a30493c9e35161c8b4b680c2525f9 Mon Sep 17 00:00:00 2001
From: Boris <72118807+Curis-lab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 14:34:53 +0630
Subject: [PATCH] feat: add tooltip descriptions to dropdown list options on
 hover

---
 .../ConfigButtons/DropdownList.tsx                 | 14 ++++++++++++--
 .../CreateFeatureDialog.tsx                        |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.tsx
index 78a11c2a26..0490d7b902 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.tsx
@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { InputAdornment, List, ListItemText } from '@mui/material';
 import { StyledDropdownSearch } from './shared.styles';
 import { StyledCheckbox, StyledListItem } from './DropdownList.styles';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 function useSelectionManagement<T>(handleToggle: (value: T) => () => void) {
     const listRefs = useRef<Array<HTMLInputElement | HTMLLIElement | null>>([]);
@@ -46,7 +47,7 @@ function useSelectionManagement<T>(handleToggle: (value: T) => () => void) {
 }
 
 export type DropdownListProps<T> = {
-    options: Array<{ label: string; value: T }>;
+    options: Array<{ label: string; description?: string; value: T }>;
     onChange: (value: T) => void;
     search: {
         label: string;
@@ -103,6 +104,9 @@ export function DropdownList<T = string>({
             <List sx={{ overflowY: 'auto' }} disablePadding>
                 {filteredOptions.map((option, index) => {
                     const labelId = `checkbox-list-label-${option.value}`;
+                    const listItemText = (
+                        <ListItemText id={labelId} primary={option.label} />
+                    );
 
                     return (
                         <StyledListItem
@@ -139,7 +143,13 @@ export function DropdownList<T = string>({
                                     disableRipple
                                 />
                             ) : null}
-                            <ListItemText id={labelId} primary={option.label} />
+                            {option.description ? (
+                                <HtmlTooltip title={option.description}>
+                                    {listItemText}
+                                </HtmlTooltip>
+                            ) : (
+                                listItemText
+                            )}
                         </StyledListItem>
                     );
                 })}
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index 60025759fd..8a75f79d21 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -364,6 +364,7 @@ const CreateFeatureDialogContent = ({
                                     (type: FeatureTypeSchema) => ({
                                         label: type.name,
                                         value: type.id,
+                                        description: type.description,
                                     }),
                                 )}
                                 onChange={(value: any) => {