feat: tooltip closing transition

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -82,24 +82,6 @@ const Tooltip = ({
     }
   }, [])
 
-  useEffect(() => {
-    if (!show) {
-      /**
-       * this fixes weird behavior when switching between two anchor elements very quickly
-       * remove the timeout and switch quickly between two adjancent anchor elements to see it
-       *
-       * in practice, this means the tooltip is not immediately removed from the DOM on hide
-       */
-      const timeout = setTimeout(() => {
-        setRendered(false)
-      }, 150)
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-    return () => null
-  }, [show])
-
   const handleShow = (value: boolean) => {
     if (!mounted.current) {
       return
@@ -657,13 +639,21 @@ const Tooltip = ({
         styles[variant],
         className,
         `react-tooltip__place-${actualPlacement}`,
-        {
-          'react-tooltip__show': canShow,
-          [coreStyles['show']]: canShow,
-          [coreStyles['fixed']]: positionStrategy === 'fixed',
-          [coreStyles['clickable']]: clickable,
-        },
+        coreStyles[canShow ? 'show' : 'closing'],
+        canShow ? 'react-tooltip__show' : 'react-tooltip__closing',
+        positionStrategy === 'fixed' && coreStyles['fixed'],
+        clickable && coreStyles['clickable'],
       )}
+      onTransitionEnd={(event: TransitionEvent) => {
+        /**
+         * @warning if `--rt-transition-closing-delay` is set to 0,
+         * the tooltip will be stuck (but not visible) on the DOM
+         */
+        if (show || event.propertyName !== 'opacity') {
+          return
+        }
+        setRendered(false)
+      }}
       style={{
         ...externalStyles,
         ...inlineStyles,
@@ -678,13 +668,7 @@ const Tooltip = ({
           coreStyles['arrow'],
           styles['arrow'],
           classNameArrow,
-          {
-            /**
-             * changed from dash `no-arrow` to camelcase because of:
-             * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
-             */
-            [coreStyles['noArrow']]: noArrow,
-          },
+          noArrow && coreStyles['noArrow'],
         )}
         style={{
           ...inlineArrowStyles,

src/components/Tooltip/core-styles.module.css

@@ -1,12 +1,10 @@
 .tooltip {
-  visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
+  will-change: opacity;
 }
 
 .fixed {
@@ -27,8 +25,13 @@
 }
 
 .show {
-  visibility: visible;
   opacity: var(--rt-opacity);
+  transition: opacity var(--rt-transition-show-delay) ease-out;
+}
+
+.closing {
+  opacity: 0;
+  transition: opacity var(--rt-transition-closing-delay) ease-in;
 }
 
 /** end - core styles **/

src/tokens.css

@@ -6,4 +6,6 @@
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
+  --rt-transition-show-delay: 0.15s;
+  --rt-transition-closing-delay: 0.15s;
 }