feat: tooltip: allow passing custom class and style to tooltip wrapper (

EightfoldAI#264)
dkilgore-eightfold · Jul 26, 2022 · 4eeb0e4 · 4eeb0e4
1 parent 19f9217
commit 4eeb0e4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -33,6 +33,8 @@ export const Tooltip: FC<TooltipProps> = ({
     hideAfter = 0,
     tabIndex = 0,
     positionStrategy = 'absolute',
+    wrapperClassNames,
+    wrapperStyle,
     ...rest
 }) => {
     const tooltipSide: string = placement.split('-')?.[0];
@@ -101,6 +103,7 @@ export const Tooltip: FC<TooltipProps> = ({
 
     const referenceWrapperClasses: string = mergeClasses([
         styles.referenceWrapper,
+        wrapperClassNames,
         { [styles.disabled]: disabled },
     ]);
 
@@ -128,6 +131,7 @@ export const Tooltip: FC<TooltipProps> = ({
         <>
             <div
                 className={referenceWrapperClasses}
+                style={wrapperStyle}
                 id={tooltipId.current}
                 onMouseEnter={toggle(true)}
                 onFocus={toggle(true)}

diff --git a/src/components/Tooltip/Tooltip.types.ts b/src/components/Tooltip/Tooltip.types.ts
@@ -62,4 +62,12 @@ export interface TooltipProps extends OcBaseProps<HTMLDivElement> {
      * @default 0
      */
     tabIndex?: number;
+    /**
+     * Wrapper class name
+     */
+    wrapperClassNames?: string;
+    /**
+     * Wrapper style
+     */
+    wrapperStyle?: React.CSSProperties;
 }