chore(ui): tweak animations

ui/src/Common/Popper.ts

@@ -0,0 +1,9 @@
+export const CommonPopperModifiers = [
+  { name: "arrow", enabled: false },
+  {
+    name: "computeStyles",
+    options: {
+      gpuAcceleration: false,
+    },
+  },
+];

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -17,11 +17,17 @@ import {
   SilenceTabNames,
   AlertmanagerClustersToOption,
 } from "Stores/SilenceFormStore";
+import { CommonPopperModifiers } from "Common/Popper";
 import { FetchPauser } from "Components/FetchPauser";
 import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { DateFromNow } from "Components/DateFromNow";
 import { useOnClickOutside } from "Hooks/useOnClickOutside";
 
+const PopperModifiers = [
+  ...CommonPopperModifiers,
+  { name: "offset", options: { offset: "-5px, 0px" } },
+];
+
 const onSilenceClick = (alertStore, silenceFormStore, group, alert) => {
   let clusters = {};
   Object.entries(alertStore.data.clustersWithoutReadOnly).forEach(
@@ -148,13 +154,7 @@ const AlertMenu = ({
           )}
         </Reference>
         <DropdownSlide in={!isHidden} unmountOnExit>
-          <Popper
-            placement="bottom-start"
-            modifiers={[
-              { name: "arrow", enabled: false },
-              { name: "offset", options: { offset: "-5px, 0px" } },
-            ]}
-          >
+          <Popper placement="bottom-start" modifiers={PopperModifiers}>
             {({ placement, ref, style }) => (
               <MenuContent
                 popperPlacement={placement}

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap

@@ -4,9 +4,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
@@ -34,9 +32,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
         </span>
       </div>
     </div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
@@ -78,9 +74,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       1 day ago
     </span>
   </span>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"badge badge-light components-label components-label-with-hover cursor-pointer\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
@@ -98,9 +92,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </svg>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
@@ -110,9 +102,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:
@@ -151,9 +141,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
@@ -181,9 +169,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
         </span>
       </div>
     </div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
@@ -225,9 +211,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       1 day ago
     </span>
   </span>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
@@ -237,9 +221,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap

@@ -28,9 +28,7 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
 
 exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
 "
-<div style=\\"display:inline-block;max-width:100%\\"
-     class=\\" tooltip-trigger\\"
->
+<div class=\\" tooltip-trigger\\">
   <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -54,9 +52,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
 
 exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
 "
-<div style=\\"display:inline-block;max-width:100%\\"
-     class=\\" tooltip-trigger\\"
->
+<div class=\\" tooltip-trigger\\">
   <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
     <span class=\\"cursor-pointer\\">
       <svg aria-hidden=\\"true\\"

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap

@@ -4,9 +4,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
 "
 <div class=\\"card-footer components-grid-alertgrid-alertgroup-footer px-2 py-1\\">
   <div class=\\"mb-1\\">
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
@@ -34,9 +32,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
         </span>
       </div>
     </div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
@@ -56,9 +52,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
@@ -68,9 +62,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
@@ -80,9 +72,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @cluster:
@@ -92,9 +82,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:
@@ -133,9 +121,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
 "
 <div class=\\"card-footer components-grid-alertgrid-alertgroup-footer px-2 py-1\\">
   <div class=\\"mb-1\\">
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
         <span class=\\"cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
@@ -163,9 +149,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
         </span>
       </div>
     </div>
-    <div style=\\"display: inline-block; max-width: 100%;\\"
-         class=\\" tooltip-trigger\\"
-    >
+    <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
@@ -185,9 +169,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
@@ -197,9 +179,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
@@ -209,9 +189,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @cluster:
@@ -221,9 +199,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </span>
     </span>
   </div>
-  <div style=\\"display: inline-block; max-width: 100%;\\"
-       class=\\" tooltip-trigger\\"
-  >
+  <div class=\\" tooltip-trigger\\">
     <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -19,10 +19,16 @@ import {
   AlertmanagerClustersToOption,
 } from "Stores/SilenceFormStore";
 import { QueryOperators, StaticLabels, FormatQuery } from "Common/Query";
+import { CommonPopperModifiers } from "Common/Popper";
 import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { FetchPauser } from "Components/FetchPauser";
 import { useOnClickOutside } from "Hooks/useOnClickOutside";
 
+const PopperModifiers = [
+  ...CommonPopperModifiers,
+  { name: "offset", options: { offset: "-5px, 0px" } },
+];
+
 const onSilenceClick = (alertStore, silenceFormStore, group) => {
   let clusters = {};
   Object.entries(alertStore.data.clustersWithoutReadOnly).forEach(
@@ -152,13 +158,7 @@ const GroupMenu = ({
           )}
         </Reference>
         <DropdownSlide in={!isHidden} unmountOnExit>
-          <Popper
-            placement="bottom-start"
-            modifiers={[
-              { name: "arrow", enabled: false },
-              { name: "offset", options: { offset: "-5px, 0px" } },
-            ]}
-          >
+          <Popper placement="bottom-start" modifiers={PopperModifiers}>
             {({ placement, ref, style }) => (
               <MenuContent
                 popperPlacement={placement}

ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap

@@ -2,9 +2,7 @@
 
 exports[`<FilteringLabel /> matches snapshot 1`] = `
 "
-<div style=\\"display: inline-block; max-width: 100%;\\"
-     class=\\" tooltip-trigger\\"
->
+<div class=\\" tooltip-trigger\\">
   <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
     <span class=\\"components-label-name\\">
       foo:

ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap

@@ -44,9 +44,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-      <div style=\\"display: inline-block; max-width: 100%;\\"
-           class=\\" tooltip-trigger\\"
-      >
+      <div class=\\" tooltip-trigger\\">
         <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
           123
         </span>
@@ -119,9 +117,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-      <div style=\\"display: inline-block; max-width: 100%;\\"
-           class=\\" tooltip-trigger\\"
-      >
+      <div class=\\" tooltip-trigger\\">
         <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
           123
         </span>
@@ -178,9 +174,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-      <div style=\\"display: inline-block; max-width: 100%;\\"
-           class=\\" tooltip-trigger\\"
-      >
+      <div class=\\" tooltip-trigger\\">
         <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
           123
         </span>
@@ -237,9 +231,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-      <div style=\\"display: inline-block; max-width: 100%;\\"
-           class=\\" tooltip-trigger\\"
-      >
+      <div class=\\" tooltip-trigger\\">
         <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
           123
         </span>

ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap

@@ -46,9 +46,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-          <div style=\\"display: inline-block; max-width: 100%;\\"
-               class=\\" tooltip-trigger\\"
-          >
+          <div class=\\" tooltip-trigger\\">
             <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
               123
             </span>
@@ -109,9 +107,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
-          <div style=\\"display: inline-block; max-width: 100%;\\"
-               class=\\" tooltip-trigger\\"
-          >
+          <div class=\\" tooltip-trigger\\">
             <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
               123
             </span>
@@ -196,9 +192,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             <span class=\\"badge badge-light px-1 mr-1 components-label\\">
               04d37636-2350-4878-b382-e0b50353230f
             </span>
-            <div style=\\"display: inline-block; max-width: 100%;\\"
-                 class=\\" tooltip-trigger\\"
-            >
+            <div class=\\" tooltip-trigger\\">
               <span class=\\"badge badge-secondary px-1 mr-1 components-label cursor-pointer\\">
                 <svg aria-hidden=\\"true\\"
                      focusable=\\"false\\"

ui/src/Components/NavBar/FilterInput/History.js

@@ -16,6 +16,7 @@ import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { IsMobile } from "Common/Device";
+import { CommonPopperModifiers } from "Common/Popper";
 import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { HistoryLabel } from "Components/Labels/HistoryLabel";
 import { useOnClickOutside } from "Hooks/useOnClickOutside";
@@ -223,7 +224,7 @@ const History = ({ alertStore, settingsStore }) => {
           )}
         </Reference>
         <DropdownSlide in={isVisible} unmountOnExit>
-          <Popper modifiers={[{ name: "arrow", enabled: false }]}>
+          <Popper modifiers={CommonPopperModifiers}>
             {({ placement, ref, style }) => (
               <HistoryMenu
                 popperPlacement={placement}

ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap

@@ -2,9 +2,7 @@
 
 exports[`<MatchCounter /> matches snapshot 1`] = `
 "
-<div style=\\"display: inline-block; max-width: 100%;\\"
-     class=\\" tooltip-trigger\\"
->
+<div class=\\" tooltip-trigger\\">
   <span class=\\"badge badge-light badge-pill d-block\\"
         style=\\"font-size: 85%; line-height: 1rem;\\"
         data-am=\\"0\\"

ui/src/Components/TooltipWrapper/index.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import PropTypes from "prop-types";
 
+import { CSSTransition } from "react-transition-group";
+
 import { usePopper } from "react-popper";
 
 import { useSupportsTouch } from "Hooks/useSupportsTouch";
@@ -63,25 +65,29 @@ const TooltipWrapper = ({ title, children, className }) => {
         onTouchCancel={supportsTouch ? hideTooltip : null}
         onTouchEnd={supportsTouch ? hideTooltip : null}
         ref={setReferenceElement}
-        style={{ display: "inline-block", maxWidth: "100%" }}
         className={`${className ? className : ""} tooltip-trigger`}
       >
         {children}
       </div>
       {isVisible
         ? createPortal(
-            <div
-              className="tooltip show tooltip-inner"
-              ref={setPopperElement}
-              style={{
-                willChange: "opacity",
-                transition: "opacity 0.2s",
-                ...styles.popper,
-              }}
-              {...attributes.popper}
+            <CSSTransition
+              classNames="components-animation-tooltip"
+              timeout={200}
+              appear
+              enter
+              in
+              unmountOnExit
             >
-              {title}
-            </div>,
+              <div
+                className="tooltip tooltip-inner"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                {title}
+              </div>
+            </CSSTransition>,
             document.body
           )
         : null}

ui/src/Styles/Components/AlertGroup.scss

@@ -3,9 +3,10 @@
 
   &.components-animation-fade-appear-done,
   &.components-animation-fade-enter-done {
+    z-index: 1;
     transition-property: transform;
     transition-duration: 0.4s;
-    transition-timing-function: ease;
+    transition-timing-function: ease-in-out;
   }
 }
 

ui/src/Styles/Components/DropdownSlide.scss

@@ -1,32 +1,30 @@
-.components-animation-slide {
-  will-change: opacity, height;
-  transform: translateZ(0);
-}
+$duration: 0.15s;
 
 .components-animation-slide-enter,
 .components-animation-slide-appear {
-  opacity: 0.25;
-  overflow: hidden;
-  max-height: 0px;
+  opacity: 0.1;
+  transform: scaleY(0);
+  transform-origin: top;
 }
 .components-animation-slide-enter-active,
 .components-animation-slide-appear-active {
-  max-height: 2000px; /* can't use auto here */
   opacity: 1;
-  transition-property: max-height, opacity;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
+  transform: scaleY(1);
+  transform-origin: top;
+  transition-property: transform, opacity;
+  transition-duration: $duration;
+  transition-timing-function: ease-in-out;
 }
 
 .components-animation-slide-exit {
-  max-height: 2000px; /* can't use auto here */
+  transform: scaleY(1);
   opacity: 1;
 }
 .components-animation-slide-exit-active {
-  opacity: 0.25;
-  overflow: hidden;
-  max-height: 0px;
-  transition-property: max-height, opacity;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
+  opacity: 0.1;
+  transform-origin: top;
+  transform: scaleY(0);
+  transition-property: transform, opacity;
+  transition-duration: $duration;
+  transition-timing-function: ease-in-out;
 }

ui/src/Styles/Components/Tooltip.scss

@@ -2,3 +2,18 @@
   display: inline-block;
   max-width: 100%;
 }
+
+$duration: 0.2s;
+.components-animation-tooltip-appear,
+.components-animation-tooltip-enter {
+  opacity: 0;
+}
+.components-animation-tooltip-appear-active,
+.components-animation-tooltip-enter-active {
+  opacity: 1;
+  transition: opacity $duration ease-in;
+}
+.components-animation-tooltip-appear-done,
+.components-animation-tooltip-enter-done {
+  opacity: 1;
+}