feat: supports tooltip show and delay

src/admin/components/elements/Button/index.tsx

@@ -28,11 +28,12 @@ const ButtonContents = ({ children, icon, tooltip }) => {
     <span
       className={`${baseClass}__content`}
     >
-      {tooltip && (
-        <Tooltip className={`${baseClass}__tooltip`}>
-          {tooltip}
-        </Tooltip>
-      )}
+      <Tooltip
+        className={`${baseClass}__tooltip`}
+        show={tooltip}
+      >
+        {tooltip}
+      </Tooltip>
       {children && (
         <span className={`${baseClass}__label`}>
           {children}

src/admin/components/elements/Tooltip/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .tooltip {
+  opacity: 0;
 	background-color: var(--theme-elevation-800);
 	position: absolute;
 	z-index: 2;
@@ -13,6 +14,7 @@
 	font-weight: normal;
 	white-space: nowrap;
 	border-radius: 2px;
+  transition: opacity .2s ease-in-out;
 
 	span {
 		position: absolute;
@@ -24,4 +26,8 @@
 		border: 10px solid transparent;
 		border-top-color: var(--theme-elevation-800);
 	}
+
+  &--show {
+    opacity: 1;
+  }
 }

src/admin/components/elements/Tooltip/index.tsx

@@ -1,18 +1,43 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Props } from './types';
 
 import './index.scss';
 
 const Tooltip: React.FC<Props> = (props) => {
-  const { className, children } = props;
-
-  const classes = [
-    'tooltip',
+  const {
     className,
-  ].filter(Boolean).join(' ');
+    children,
+    show: showFromProps = true,
+    delay,
+  } = props;
+
+  const [show, setShow] = React.useState(showFromProps);
+
+  useEffect(() => {
+    let timerId: NodeJS.Timeout;
+
+    // do not use the delay on out
+    if (delay && showFromProps) {
+      timerId = setTimeout(() => {
+        setShow(showFromProps);
+      }, delay);
+    } else {
+      setShow(showFromProps);
+    }
+
+    return () => {
+      if (timerId) clearTimeout(timerId);
+    };
+  }, [showFromProps, delay]);
 
   return (
-    <aside className={classes}>
+    <aside
+      className={[
+        'tooltip',
+        className,
+        show && 'tooltip--show',
+      ].filter(Boolean).join(' ')}
+    >
       {children}
       <span />
     </aside>

src/admin/components/elements/Tooltip/types.ts

@@ -1,4 +1,6 @@
 export type Props = {
-  className?: string,
-  children: React.ReactNode,
+  className?: string
+  children: React.ReactNode
+  show?: boolean
+  delay?: number
 }