From 5e645fd02cba8563742072807ce2baa5aed97358 Mon Sep 17 00:00:00 2001
From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com>
Date: Thu, 16 Oct 2025 16:23:26 +0200
Subject: [PATCH 1/4] Fix tooltip when components are disabled so it doesn't
 appear

---
 packages/lib/src/avatar/Avatar.tsx            |  2 +-
 packages/lib/src/button/Button.tsx            |  6 +++---
 packages/lib/src/dropdown/Dropdown.tsx        |  6 +++---
 packages/lib/src/select/Select.tsx            | 15 +++++++++------
 packages/lib/src/tabs/Tab.tsx                 |  6 +++---
 packages/lib/src/toggle-group/ToggleGroup.tsx |  6 +++---
 6 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/lib/src/avatar/Avatar.tsx b/packages/lib/src/avatar/Avatar.tsx
index a4e1a13bc..1d46469b6 100644
--- a/packages/lib/src/avatar/Avatar.tsx
+++ b/packages/lib/src/avatar/Avatar.tsx
@@ -162,7 +162,7 @@ const DxcAvatar = memo(
     );
 
     return (
-      <TooltipWrapper condition={!!title} label={title}>
+      <TooltipWrapper condition={!disabled && !!title} label={title}>
         <AvatarContainer
           size={size}
           onClick={!disabled ? onClick : undefined}
diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
index 9c3f86bd8..36fa941b9 100644
--- a/packages/lib/src/button/Button.tsx
+++ b/packages/lib/src/button/Button.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { spaces } from "../common/variables";
 import ButtonPropsType, { Mode, Semantic, Size } from "./types";
 import DxcIcon from "../icon/Icon";
-import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipWrapper } from "../tooltip/Tooltip";
 import { calculateWidth, getButtonStyles, getHeight } from "./utils";
 
 const Button = styled.button<{
@@ -80,7 +80,7 @@ const DxcButton = ({
   title,
   type = "button",
 }: ButtonPropsType): JSX.Element => (
-  <Tooltip label={title}>
+  <TooltipWrapper condition={!disabled} label={title}>
     <Button
       aria-label={title}
       disabled={disabled}
@@ -97,7 +97,7 @@ const DxcButton = ({
       {label && <LabelContainer>{label}</LabelContainer>}
       {icon && <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>}
     </Button>
-  </Tooltip>
+  </TooltipWrapper>
 );
 
 export default DxcButton;
diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx
index f2b10b12b..44635e91a 100644
--- a/packages/lib/src/dropdown/Dropdown.tsx
+++ b/packages/lib/src/dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ import DxcIcon from "../icon/Icon";
 import useWidth from "../utils/useWidth";
 import DropdownMenu from "./DropdownMenu";
 import DropdownPropsType from "./types";
-import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipWrapper } from "../tooltip/Tooltip";
 
 const sizes = {
   small: "60px",
@@ -260,7 +260,7 @@ const DxcDropdown = ({
         size={size}
       >
         <Popover.Root open={isOpen}>
-          <Tooltip label={title}>
+          <TooltipWrapper condition={!disabled} label={title}>
             <Popover.Trigger asChild type={undefined}>
               <DropdownTrigger
                 onClick={handleTriggerOnClick}
@@ -299,7 +299,7 @@ const DxcDropdown = ({
                 )}
               </DropdownTrigger>
             </Popover.Trigger>
-          </Tooltip>
+          </TooltipWrapper>
           <Popover.Portal container={document.getElementById(`${id}-portal`)}>
             <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
               <DropdownMenu
diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx
index 8d31c160f..73e498e31 100644
--- a/packages/lib/src/select/Select.tsx
+++ b/packages/lib/src/select/Select.tsx
@@ -15,7 +15,7 @@ import {
 import styled from "@emotion/styled";
 import { spaces } from "../common/variables";
 import DxcIcon from "../icon/Icon";
-import { Tooltip, TooltipWrapper } from "../tooltip/Tooltip";
+import { TooltipWrapper } from "../tooltip/Tooltip";
 import { HalstackLanguageContext } from "../HalstackContext";
 import useWidth from "../utils/useWidth";
 import Listbox from "./Listbox";
@@ -524,7 +524,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                 {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && (
                   <SelectionIndicator disabled={disabled}>
                     <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber>
-                    <Tooltip label={translatedLabels.select.actionClearSelectionTitle}>
+                    <TooltipWrapper condition={!disabled} label={translatedLabels.select.actionClearSelectionTitle}>
                       <ClearOptionsAction
                         aria-label={translatedLabels.select.actionClearSelectionTitle}
                         disabled={disabled}
@@ -537,10 +537,13 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                       >
                         <DxcIcon icon="clear" />
                       </ClearOptionsAction>
-                    </Tooltip>
+                    </TooltipWrapper>
                   </SelectionIndicator>
                 )}
-                <TooltipWrapper condition={hasTooltip} label={getSelectedOptionLabel(placeholder, selectedOption)}>
+                <TooltipWrapper
+                  condition={!disabled && hasTooltip}
+                  label={getSelectedOptionLabel(placeholder, selectedOption)}
+                >
                   <SearchableValueContainer>
                     <input
                       disabled={disabled}
@@ -580,14 +583,14 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                 </TooltipWrapper>
                 <DxcFlex alignItems="center">
                   {searchable && searchValue.length > 0 && (
-                    <Tooltip label={translatedLabels.select.actionClearSelectionTitle}>
+                    <TooltipWrapper condition={!disabled} label={translatedLabels.select.actionClearSelectionTitle}>
                       <DxcActionIcon
                         icon="clear"
                         onClick={handleClearSearchActionOnClick}
                         tabIndex={-1}
                         title={translatedLabels.select.actionClearSearchTitle}
                       />
-                    </Tooltip>
+                    </TooltipWrapper>
                   )}
                   <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
                 </DxcFlex>
diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx
index 2f97d9191..df36471c7 100644
--- a/packages/lib/src/tabs/Tab.tsx
+++ b/packages/lib/src/tabs/Tab.tsx
@@ -2,7 +2,7 @@ import { forwardRef, KeyboardEvent, MutableRefObject, Ref, useContext, useEffect
 import styled from "@emotion/styled";
 import DxcBadge from "../badge/Badge";
 import DxcIcon from "../icon/Icon";
-import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipWrapper } from "../tooltip/Tooltip";
 import TabsContext from "./TabsContext";
 import { TabProps, TabsContextProps } from "./types";
 
@@ -128,7 +128,7 @@ const DxcTab = forwardRef(
     }, [active, tabId, setActiveTabId]);
 
     return (
-      <Tooltip label={title}>
+      <TooltipWrapper condition={!disabled} label={title}>
         <Tab
           aria-selected={activeTabId === tabId}
           disabled={disabled}
@@ -172,7 +172,7 @@ const DxcTab = forwardRef(
           )}
           <Underline active={activeTabId === tabId} />
         </Tab>
-      </Tooltip>
+      </TooltipWrapper>
     );
   }
 );
diff --git a/packages/lib/src/toggle-group/ToggleGroup.tsx b/packages/lib/src/toggle-group/ToggleGroup.tsx
index db80c10de..79bb53d68 100644
--- a/packages/lib/src/toggle-group/ToggleGroup.tsx
+++ b/packages/lib/src/toggle-group/ToggleGroup.tsx
@@ -2,7 +2,7 @@ import { KeyboardEvent, useState } from "react";
 import styled from "@emotion/styled";
 import { spaces } from "../common/variables";
 import DxcIcon from "../icon/Icon";
-import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipWrapper } from "../tooltip/Tooltip";
 import ToggleGroupPropsType from "./types";
 import { getButtonStyles, getHeight } from "../button/utils";
 
@@ -106,7 +106,7 @@ export default function DxcToggleGroup({
       {options.map((option, i) => {
         const selected = !option.disabled && isToggleButtonSelected(multiple, option.value, value ?? selectedValue);
         return (
-          <Tooltip label={option.title} key={`toggle-${i}-${option.label}`}>
+          <TooltipWrapper condition={!option.disabled} label={option.title} key={`toggle-${i}-${option.label}`}>
             <ToggleButton
               aria-label={option.title}
               aria-pressed={selected}
@@ -128,7 +128,7 @@ export default function DxcToggleGroup({
               )}
               {option.label && <span>{option.label}</span>}
             </ToggleButton>
-          </Tooltip>
+          </TooltipWrapper>
         );
       })}
     </ToggleGroup>

From 41b3645182c470f9f2d07ddc4c849b68fbd5c5ac Mon Sep 17 00:00:00 2001
From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com>
Date: Thu, 16 Oct 2025 16:56:45 +0200
Subject: [PATCH 2/4] Fix condition

---
 packages/lib/src/avatar/Avatar.tsx | 2 +-
 packages/lib/src/button/Button.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/lib/src/avatar/Avatar.tsx b/packages/lib/src/avatar/Avatar.tsx
index 1d46469b6..a4e1a13bc 100644
--- a/packages/lib/src/avatar/Avatar.tsx
+++ b/packages/lib/src/avatar/Avatar.tsx
@@ -162,7 +162,7 @@ const DxcAvatar = memo(
     );
 
     return (
-      <TooltipWrapper condition={!disabled && !!title} label={title}>
+      <TooltipWrapper condition={!!title} label={title}>
         <AvatarContainer
           size={size}
           onClick={!disabled ? onClick : undefined}
diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
index 36fa941b9..bb310dc8b 100644
--- a/packages/lib/src/button/Button.tsx
+++ b/packages/lib/src/button/Button.tsx
@@ -80,7 +80,7 @@ const DxcButton = ({
   title,
   type = "button",
 }: ButtonPropsType): JSX.Element => (
-  <TooltipWrapper condition={!disabled} label={title}>
+  <TooltipWrapper condition={!!title} label={title}>
     <Button
       aria-label={title}
       disabled={disabled}

From d8ede1f2a5d563dad8dffe0c4b65e3f1efb4cc98 Mon Sep 17 00:00:00 2001
From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com>
Date: Thu, 16 Oct 2025 17:06:55 +0200
Subject: [PATCH 3/4] Modify Tooltip only in Select and Chip

---
 packages/lib/src/action-icon/types.ts         | 2 +-
 packages/lib/src/chip/Chip.tsx                | 4 ++--
 packages/lib/src/dropdown/Dropdown.tsx        | 2 +-
 packages/lib/src/select/Select.tsx            | 5 +----
 packages/lib/src/tabs/Tab.tsx                 | 2 +-
 packages/lib/src/toggle-group/ToggleGroup.tsx | 2 +-
 6 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/lib/src/action-icon/types.ts b/packages/lib/src/action-icon/types.ts
index c52717494..fa72c3d33 100644
--- a/packages/lib/src/action-icon/types.ts
+++ b/packages/lib/src/action-icon/types.ts
@@ -9,7 +9,7 @@ type Props = {
   /**
    * Value for the HTML properties title and aria-label.
    */
-  title: string;
+  title?: string;
   /**
    * Material Symbol name or SVG element as the icon that will be placed next to the label.
    */
diff --git a/packages/lib/src/chip/Chip.tsx b/packages/lib/src/chip/Chip.tsx
index eec5e44d3..d3322850a 100644
--- a/packages/lib/src/chip/Chip.tsx
+++ b/packages/lib/src/chip/Chip.tsx
@@ -71,7 +71,7 @@ const DxcChip = ({
           icon={prefixIcon}
           onClick={onClickPrefix}
           tabIndex={tabIndex}
-          title="Prefix Action"
+          title={!disabled ? "Prefix Action" : undefined}
         />
       ) : (
         <IconContainer disabled={disabled}>
@@ -86,7 +86,7 @@ const DxcChip = ({
           icon={suffixIcon}
           onClick={onClickSuffix}
           tabIndex={tabIndex}
-          title="Suffix Action"
+          title={!disabled ? "Suffix Action" : undefined}
         />
       ) : (
         <IconContainer disabled={disabled}>
diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx
index 44635e91a..ac9093489 100644
--- a/packages/lib/src/dropdown/Dropdown.tsx
+++ b/packages/lib/src/dropdown/Dropdown.tsx
@@ -260,7 +260,7 @@ const DxcDropdown = ({
         size={size}
       >
         <Popover.Root open={isOpen}>
-          <TooltipWrapper condition={!disabled} label={title}>
+          <TooltipWrapper label={title}>
             <Popover.Trigger asChild type={undefined}>
               <DropdownTrigger
                 onClick={handleTriggerOnClick}
diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx
index 73e498e31..b62702cbd 100644
--- a/packages/lib/src/select/Select.tsx
+++ b/packages/lib/src/select/Select.tsx
@@ -540,10 +540,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
                     </TooltipWrapper>
                   </SelectionIndicator>
                 )}
-                <TooltipWrapper
-                  condition={!disabled && hasTooltip}
-                  label={getSelectedOptionLabel(placeholder, selectedOption)}
-                >
+                <TooltipWrapper condition={hasTooltip} label={getSelectedOptionLabel(placeholder, selectedOption)}>
                   <SearchableValueContainer>
                     <input
                       disabled={disabled}
diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx
index df36471c7..14879cd69 100644
--- a/packages/lib/src/tabs/Tab.tsx
+++ b/packages/lib/src/tabs/Tab.tsx
@@ -128,7 +128,7 @@ const DxcTab = forwardRef(
     }, [active, tabId, setActiveTabId]);
 
     return (
-      <TooltipWrapper condition={!disabled} label={title}>
+      <TooltipWrapper condition={!!title} label={title}>
         <Tab
           aria-selected={activeTabId === tabId}
           disabled={disabled}
diff --git a/packages/lib/src/toggle-group/ToggleGroup.tsx b/packages/lib/src/toggle-group/ToggleGroup.tsx
index 79bb53d68..170333e31 100644
--- a/packages/lib/src/toggle-group/ToggleGroup.tsx
+++ b/packages/lib/src/toggle-group/ToggleGroup.tsx
@@ -106,7 +106,7 @@ export default function DxcToggleGroup({
       {options.map((option, i) => {
         const selected = !option.disabled && isToggleButtonSelected(multiple, option.value, value ?? selectedValue);
         return (
-          <TooltipWrapper condition={!option.disabled} label={option.title} key={`toggle-${i}-${option.label}`}>
+          <TooltipWrapper condition={!!option.title} label={option.title} key={`toggle-${i}-${option.label}`}>
             <ToggleButton
               aria-label={option.title}
               aria-pressed={selected}

From f8fd94076139d433022af80af123270940e7698b Mon Sep 17 00:00:00 2001
From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com>
Date: Fri, 17 Oct 2025 08:58:44 +0200
Subject: [PATCH 4/4] Remove unnecesary changes

---
 packages/lib/src/button/Button.tsx            | 6 +++---
 packages/lib/src/dropdown/Dropdown.tsx        | 6 +++---
 packages/lib/src/tabs/Tab.tsx                 | 6 +++---
 packages/lib/src/toggle-group/ToggleGroup.tsx | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
index bb310dc8b..9c3f86bd8 100644
--- a/packages/lib/src/button/Button.tsx
+++ b/packages/lib/src/button/Button.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { spaces } from "../common/variables";
 import ButtonPropsType, { Mode, Semantic, Size } from "./types";
 import DxcIcon from "../icon/Icon";
-import { TooltipWrapper } from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 import { calculateWidth, getButtonStyles, getHeight } from "./utils";
 
 const Button = styled.button<{
@@ -80,7 +80,7 @@ const DxcButton = ({
   title,
   type = "button",
 }: ButtonPropsType): JSX.Element => (
-  <TooltipWrapper condition={!!title} label={title}>
+  <Tooltip label={title}>
     <Button
       aria-label={title}
       disabled={disabled}
@@ -97,7 +97,7 @@ const DxcButton = ({
       {label && <LabelContainer>{label}</LabelContainer>}
       {icon && <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>}
     </Button>
-  </TooltipWrapper>
+  </Tooltip>
 );
 
 export default DxcButton;
diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx
index ac9093489..f2b10b12b 100644
--- a/packages/lib/src/dropdown/Dropdown.tsx
+++ b/packages/lib/src/dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ import DxcIcon from "../icon/Icon";
 import useWidth from "../utils/useWidth";
 import DropdownMenu from "./DropdownMenu";
 import DropdownPropsType from "./types";
-import { TooltipWrapper } from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 
 const sizes = {
   small: "60px",
@@ -260,7 +260,7 @@ const DxcDropdown = ({
         size={size}
       >
         <Popover.Root open={isOpen}>
-          <TooltipWrapper label={title}>
+          <Tooltip label={title}>
             <Popover.Trigger asChild type={undefined}>
               <DropdownTrigger
                 onClick={handleTriggerOnClick}
@@ -299,7 +299,7 @@ const DxcDropdown = ({
                 )}
               </DropdownTrigger>
             </Popover.Trigger>
-          </TooltipWrapper>
+          </Tooltip>
           <Popover.Portal container={document.getElementById(`${id}-portal`)}>
             <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
               <DropdownMenu
diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx
index 14879cd69..2f97d9191 100644
--- a/packages/lib/src/tabs/Tab.tsx
+++ b/packages/lib/src/tabs/Tab.tsx
@@ -2,7 +2,7 @@ import { forwardRef, KeyboardEvent, MutableRefObject, Ref, useContext, useEffect
 import styled from "@emotion/styled";
 import DxcBadge from "../badge/Badge";
 import DxcIcon from "../icon/Icon";
-import { TooltipWrapper } from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 import TabsContext from "./TabsContext";
 import { TabProps, TabsContextProps } from "./types";
 
@@ -128,7 +128,7 @@ const DxcTab = forwardRef(
     }, [active, tabId, setActiveTabId]);
 
     return (
-      <TooltipWrapper condition={!!title} label={title}>
+      <Tooltip label={title}>
         <Tab
           aria-selected={activeTabId === tabId}
           disabled={disabled}
@@ -172,7 +172,7 @@ const DxcTab = forwardRef(
           )}
           <Underline active={activeTabId === tabId} />
         </Tab>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 );
diff --git a/packages/lib/src/toggle-group/ToggleGroup.tsx b/packages/lib/src/toggle-group/ToggleGroup.tsx
index 170333e31..db80c10de 100644
--- a/packages/lib/src/toggle-group/ToggleGroup.tsx
+++ b/packages/lib/src/toggle-group/ToggleGroup.tsx
@@ -2,7 +2,7 @@ import { KeyboardEvent, useState } from "react";
 import styled from "@emotion/styled";
 import { spaces } from "../common/variables";
 import DxcIcon from "../icon/Icon";
-import { TooltipWrapper } from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 import ToggleGroupPropsType from "./types";
 import { getButtonStyles, getHeight } from "../button/utils";
 
@@ -106,7 +106,7 @@ export default function DxcToggleGroup({
       {options.map((option, i) => {
         const selected = !option.disabled && isToggleButtonSelected(multiple, option.value, value ?? selectedValue);
         return (
-          <TooltipWrapper condition={!!option.title} label={option.title} key={`toggle-${i}-${option.label}`}>
+          <Tooltip label={option.title} key={`toggle-${i}-${option.label}`}>
             <ToggleButton
               aria-label={option.title}
               aria-pressed={selected}
@@ -128,7 +128,7 @@ export default function DxcToggleGroup({
               )}
               {option.label && <span>{option.label}</span>}
             </ToggleButton>
-          </TooltipWrapper>
+          </Tooltip>
         );
       })}
     </ToggleGroup>