fix: add tooltip to button

michibox · May 29, 2023 · 634ab72 · 634ab72
1 parent 6ef0105
commit 634ab72
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "prop-types": "^15.8.1",
     "prop-types-extra": "^1.1.0",
     "react-full-screen": "^1.1.1",
-    "react-popper": "^2.3.0",
+    "react-popper": "^2.2.4",
     "react-select": "^5.7.0",
     "react-spinners": "^0.13.8",
     "react-transition-group": "^4.4.2",

diff --git a/src/components/Tooltip2.tsx b/src/components/Tooltip2.tsx
@@ -15,34 +15,48 @@ export interface ITooltipProps {
     toggle?: () => void;
 }
 
-export const Tooltip2: React.FC<ITooltipProps> = ({
-    placement = 'top',
-    autohide = true,
-    placementPrefix = 'bs-tooltip',
-    trigger = 'hover focus',
-    children,
-    ...propsMain
-}) => {
-    const props = {
-        placement,
-        autohide,
-        placementPrefix,
-        trigger,
-        children,
-        ...propsMain,
-    };
-    const popperClasses = classNames('tooltip', 'show', props.popperClassName);
+export const Tooltip2 = React.forwardRef<HTMLInputElement, ITooltipProps>(
+    (
+        {
+            placement = 'top',
+            autohide = true,
+            placementPrefix = 'bs-tooltip',
+            trigger = 'hover focus',
+            children,
+            ...propsMain
+        },
+        // @ts-ignore
+        ref
+    ) => {
+        const props = {
+            placement,
+            autohide,
+            placementPrefix,
+            trigger,
+            children,
+            ...propsMain,
+        };
 
-    const classes = classNames('tooltip-inner', props.innerClassName);
+        /*  if (ref) {
+            props.ref = ref;
+        } */
 
-    return (
-        <TooltipPopoverWrapper
-            {...props}
-            arrowClassName="tooltip-arrow"
-            popperClassName={popperClasses}
-            innerClassName={classes}
-        />
-    );
-};
+        const popperClasses = classNames(
+            'tooltip',
+            'show',
+            props.popperClassName
+        );
+        const classes = classNames('tooltip-inner', props.innerClassName);
+
+        return (
+            <TooltipPopoverWrapper
+                {...props}
+                arrowClassName="tooltip-arrow"
+                popperClassName={popperClasses}
+                innerClassName={classes}
+            />
+        );
+    }
+);
 
 export default Tooltip2;