Merge pull request #2521 from anuradha9712/fix-tooltip-classname

fix(tooltip): update props order to accept classname in tooltip compo…
innovaccer · Jan 30, 2025 · f8a3180 · f8a3180
2 parents 275936f + 865a024
commit f8a3180
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/core/components/molecules/tooltip/Tooltip.tsx b/core/components/molecules/tooltip/Tooltip.tsx
@@ -3,6 +3,7 @@ import { Popover, Text } from '@/index';
 import { PopoverProps } from '@/index.type';
 import { BaseProps, filterProps } from '@/utils/types';
 import styles from '@css/components/tooltip.module.css';
+import classNames from 'classnames';
 
 type Position = 'top-start' | 'top' | 'top-end' | 'right' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left';
 
@@ -83,7 +84,7 @@ export const detectTruncation = (boundaryRef: React.RefObject<HTMLElement>) => {
 };
 
 export const Tooltip = (props: TooltipProps) => {
-  const { children, tooltip, showTooltip, showOnTruncation, elementRef, ...rest } = props;
+  const { children, tooltip, showTooltip, showOnTruncation, elementRef, className, ...rest } = props;
   const childrenRef = React.useRef(null);
   const [isTruncated, setIsTruncated] = React.useState(false);
 
@@ -112,18 +113,20 @@ export const Tooltip = (props: TooltipProps) => {
     </div>
   );
 
+  const classes = classNames(styles['Tooltip-container'], className);
+
   if (showOnTruncation) {
     return isTruncated ? (
       <Popover
         trigger={renderChildren}
         on={'hover'}
         offset={'medium'}
-        {...rest}
         animationClass={{
           open: styles[`Tooltip-animation-open-${positionValue[props.position]}`],
           close: styles[`Tooltip-animation-close-${positionValue[props.position]}`],
         }}
-        className={styles['Tooltip-container']}
+        className={classes}
+        {...rest}
       >
         {tooltipWrapper}
       </Popover>
@@ -137,12 +140,12 @@ export const Tooltip = (props: TooltipProps) => {
       trigger={children}
       on={'hover'}
       offset={'medium'}
-      {...rest}
       animationClass={{
         open: styles[`Tooltip-animation-open-${positionValue[props.position]}`],
         close: styles[`Tooltip-animation-close-${positionValue[props.position]}`],
       }}
-      className={styles['Tooltip-container']}
+      className={classes}
+      {...rest}
     >
       {tooltipWrapper}
     </Popover>

diff --git a/core/components/molecules/tooltip/__tests__/Tooltip.test.tsx b/core/components/molecules/tooltip/__tests__/Tooltip.test.tsx
@@ -85,4 +85,15 @@ describe('Tooltip component with text overflow', () => {
     const tooltipText = queryByText('A tooltip');
     expect(tooltipText).not.toBeInTheDocument();
   });
+
+  it('should support custom class', () => {
+    const { getByRole, getByTestId } = render(
+      <Tooltip tooltip="A tooltip" className="custom-class">
+        <Button>show me the tooltip on hover</Button>
+      </Tooltip>
+    );
+    const button = getByRole('button');
+    fireEvent.mouseOver(button);
+    getByTestId('DesignSystem-Popover').classList.contains('custom-class');
+  });
 });