fix: add tooltip to button

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

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "react-popper": "^2.2.4",
     "react-select": "^5.7.0",
     "react-spinners": "^0.13.8",
+    "react-tooltip": "^5.13.1",
     "react-transition-group": "^4.4.2",
     "uncontrollable": "^7.2.1",
     "uuid": "^9.0.0",

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -9,9 +9,8 @@ import {
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import { ButtonVariant } from './types';
-import OverlayTrigger from './OverlayTrigger';
-import { Tooltip2 } from './Tooltip2';
 import { v4 as uuid } from 'uuid';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 const faAsterisk = {
     prefix: 'fal',
@@ -129,20 +128,20 @@ const defaultProps = {
 const useTooltip = (tooltip: any) => {
     if (!tooltip) {
         return {
-            tooltipOpen: false,
+            /*  tooltipOpen: false,
             setTooltipOpen: null,
-            toggle: () => {},
+            toggle: () => {}, */
             tooltipId: null,
         };
     }
-    const [tooltipOpen, setTooltipOpen] = React.useState(false);
-    const toggle = () => setTooltipOpen(!tooltipOpen);
+    /* const [tooltipOpen, setTooltipOpen] = React.useState(false);
+    const toggle = () => setTooltipOpen(!tooltipOpen); */
     const [tooltipId] = React.useState(`button-tooltip-${uuid()}`);
 
     return {
-        tooltipOpen,
+        /*  tooltipOpen,
         setTooltipOpen,
-        toggle,
+        toggle, */
         tooltipId,
     };
 };
@@ -170,8 +169,8 @@ export const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
             },
             ref
         ) => {
-            const { tooltipOpen, setTooltipOpen, toggle, tooltipId } =
-                useTooltip(tooltip);
+            const { tooltipId } = useTooltip(tooltip);
+            // tooltipOpen, setTooltipOpen, toggle,
 
             const prefix = useBootstrapPrefix(bsPrefix, 'btn');
             const [buttonProps, { tagName }] = useButtonProps({
@@ -247,7 +246,8 @@ export const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
                         {...{
                             ...(tooltip &&
                                 tooltipId && {
-                                    id: tooltipId,
+                                    'data-tooltip-id': tooltipId,
+                                    'data-tooltip-content': tooltip,
                                 }),
                         }}
                     >
@@ -266,14 +266,7 @@ export const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
                     </Component>
 
                     {tooltip && tooltipId && (
-                        <Tooltip2
-                            placement={'top'}
-                            isOpen={tooltipOpen}
-                            target={tooltipId}
-                            toggle={toggle}
-                        >
-                            <p>{tooltip}</p>
-                        </Tooltip2>
+                        <ReactTooltip id={tooltipId} place="top" />
                     )}
                 </React.Fragment>
             );

diff --git a/src/components/Tooltip2.tsx b/src/components/Tooltip2.tsx
@@ -13,6 +13,7 @@ export interface ITooltipProps {
     isOpen?: boolean;
     target?: any;
     toggle?: () => void;
+    fade?: boolean;
 }
 
 export const Tooltip2 = React.forwardRef<HTMLInputElement, ITooltipProps>(
@@ -25,7 +26,6 @@ export const Tooltip2 = React.forwardRef<HTMLInputElement, ITooltipProps>(
             children,
             ...propsMain
         },
-        // @ts-ignore
         ref
     ) => {
         const props = {
@@ -37,10 +37,6 @@ export const Tooltip2 = React.forwardRef<HTMLInputElement, ITooltipProps>(
             ...propsMain,
         };
 
-        /*  if (ref) {
-            props.ref = ref;
-        } */
-
         const popperClasses = classNames(
             'tooltip',
             'show',
@@ -54,6 +50,7 @@ export const Tooltip2 = React.forwardRef<HTMLInputElement, ITooltipProps>(
                 arrowClassName="tooltip-arrow"
                 popperClassName={popperClasses}
                 innerClassName={classes}
+                ref={ref}
             />
         );
     }