Merge pull request #1979 from dxc-technology/Mil4n0r/tooltip-badge

Added custom tooltip to `Badge`
dxc-technology · Jul 15, 2024 · c723cf5 · c723cf5
2 parents 007927e + ca9f68d
commit c723cf5
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/packages/lib/src/badge/Badge.tsx b/packages/lib/src/badge/Badge.tsx
@@ -3,6 +3,7 @@ import BadgePropsType from "./types";
 import DxcFlex from "../flex/Flex";
 import CoreTokens from "../common/coreTokens";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 
 const contextualColorMap = {
   grey: {
@@ -92,23 +93,24 @@ const DxcBadge = ({
   size = "medium",
 }: BadgePropsType): JSX.Element => {
   return (
-    <BadgeContainer
-      label={label}
-      mode={mode}
-      color={(mode === "contextual" && color) || undefined}
-      size={size}
-      title={title}
-      aria-label={title}
-    >
-      {(mode === "contextual" && (
-        <DxcFlex gap="0.125rem" alignItems="center">
-          {icon && (
-            <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>
-          )}
-          <Label label={label} notificationLimit={notificationLimit} size={size} />
-        </DxcFlex>
-      )) || <Label label={label} notificationLimit={notificationLimit} size={size} />}
-    </BadgeContainer>
+    <DxcTooltip label={title}>
+      <BadgeContainer
+        label={label}
+        mode={mode}
+        color={(mode === "contextual" && color) || undefined}
+        size={size}
+        aria-label={title}
+      >
+        {(mode === "contextual" && (
+          <DxcFlex gap="0.125rem" alignItems="center">
+            {icon && (
+              <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>
+            )}
+            <Label label={label} notificationLimit={notificationLimit} size={size} />
+          </DxcFlex>
+        )) || <Label label={label} notificationLimit={notificationLimit} size={size} />}
+      </BadgeContainer>
+    </DxcTooltip>
   );
 };