added button tooltips

src/components/input/Button/index.tsx

@@ -1,8 +1,16 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FC,
+  createElement,
+  memo,
+  useRef,
+} from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
+import { usePopper } from 'react-popper';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -19,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
   is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
+  label?: string;
 };
 
 const Button: FC<IButtonProps> = memo(
@@ -37,9 +46,24 @@ const Button: FC<IButtonProps> = memo(
     stretchy,
     disabled,
     iconOnly,
+    label,
+    ref,
     ...props
-  }) =>
-    createElement(
+  }) => {
+    const tooltip = useRef<HTMLSpanElement>();
+    const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
+      placement: 'top',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+      ],
+    });
+
+    return createElement(
       seamless || non_submitting ? 'div' : 'button',
       {
         className: classnames(styles.button, className, styles[size], styles[color], {
@@ -58,8 +82,19 @@ const Button: FC<IButtonProps> = memo(
         iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
         title ? <span>{title}</span> : children || null,
         iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
+        !!label && (
+          <span
+            ref={tooltip}
+            className={styles.tooltip}
+            style={pop.styles.popper}
+            {...pop.attributes.popper}
+          >
+            {label}
+          </span>
+        ),
       ]
-    )
+    );
+  }
 );
 
 export { Button };

src/components/input/Button/styles.module.scss

@@ -10,6 +10,7 @@
 }
 
 .button {
+  position: relative;
   height: $input_height;
   border: none;
   box-sizing: border-box;
@@ -235,3 +236,21 @@
   width: 20px;
   height: 20px;
 }
+
+.tooltip {
+  padding: 5px 10px;
+  background-color: darken($content_bg, 4%);
+  z-index: 2;
+  border-radius: $input_radius;
+  text-transform: none;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.1s;
+  border: 1px solid transparentize(white, 0.9);
+
+  .button:hover & {
+    opacity: 1;
+    font: $font_14_semibold;
+  }
+}