From fa8c1caad3087abbffda0a645689d3740fa079a5 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Fri, 10 May 2024 13:14:39 +0200
Subject: [PATCH] Added DxcTooltip to toggle group component

---
 lib/src/toggle-group/ToggleGroup.tsx | 86 ++++++++++++++--------------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/lib/src/toggle-group/ToggleGroup.tsx b/lib/src/toggle-group/ToggleGroup.tsx
index 28114550b..d412bb3c6 100644
--- a/lib/src/toggle-group/ToggleGroup.tsx
+++ b/lib/src/toggle-group/ToggleGroup.tsx
@@ -5,6 +5,7 @@ import useTheme from "../useTheme";
 import ToggleGroupPropsType, { OptionLabel } from "./types";
 import DxcFlex from "../flex/Flex";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 
 const DxcToggleGroup = ({
   label,
@@ -66,48 +67,49 @@ const DxcToggleGroup = ({
         <HelperText disabled={disabled}>{helperText}</HelperText>
         <OptionsContainer aria-labelledby={toggleGroupLabelId}>
           {options.map((option, i) => (
-            <ToggleButton
-              key={`toggle-${i}-${option.label}`}
-              aria-label={option.title}
-              aria-pressed={
-                multiple
-                  ? value
-                    ? Array.isArray(value) && value.includes(option.value)
-                    : Array.isArray(selectedValue) && selectedValue.includes(option.value)
-                  : value
-                  ? option.value === value
-                  : option.value === selectedValue
-              }
-              disabled={disabled}
-              onClick={() => {
-                handleToggleChange(option.value);
-              }}
-              onKeyDown={(event) => {
-                handleOnKeyDown(event, option.value);
-              }}
-              tabIndex={!disabled ? tabIndex : -1}
-              title={option.title}
-              hasIcon={option.icon}
-              optionLabel={option.label}
-              selected={
-                multiple
-                  ? value
-                    ? Array.isArray(value) && value.includes(option.value)
-                    : Array.isArray(selectedValue) && selectedValue.includes(option.value)
-                  : value
-                  ? option.value === value
-                  : option.value === selectedValue
-              }
-            >
-              <DxcFlex alignItems="center">
-                {option.icon && (
-                  <IconContainer optionLabel={option.label}>
-                    {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
-                  </IconContainer>
-                )}
-                {option.label && <LabelContainer>{option.label}</LabelContainer>}
-              </DxcFlex>
-            </ToggleButton>
+            <DxcTooltip label={option.title}>
+              <ToggleButton
+                key={`toggle-${i}-${option.label}`}
+                aria-label={option.title}
+                aria-pressed={
+                  multiple
+                    ? value
+                      ? Array.isArray(value) && value.includes(option.value)
+                      : Array.isArray(selectedValue) && selectedValue.includes(option.value)
+                    : value
+                      ? option.value === value
+                      : option.value === selectedValue
+                }
+                disabled={disabled}
+                onClick={() => {
+                  handleToggleChange(option.value);
+                }}
+                onKeyDown={(event) => {
+                  handleOnKeyDown(event, option.value);
+                }}
+                tabIndex={!disabled ? tabIndex : -1}
+                hasIcon={option.icon}
+                optionLabel={option.label}
+                selected={
+                  multiple
+                    ? value
+                      ? Array.isArray(value) && value.includes(option.value)
+                      : Array.isArray(selectedValue) && selectedValue.includes(option.value)
+                    : value
+                      ? option.value === value
+                      : option.value === selectedValue
+                }
+              >
+                <DxcFlex alignItems="center">
+                  {option.icon && (
+                    <IconContainer optionLabel={option.label}>
+                      {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
+                    </IconContainer>
+                  )}
+                  {option.label && <LabelContainer>{option.label}</LabelContainer>}
+                </DxcFlex>
+              </ToggleButton>
+            </DxcTooltip>
           ))}
         </OptionsContainer>
       </ToggleGroup>