From cb9a0d50176e4cd961a4d8f5c82fe33337b68602 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Fri, 18 Apr 2025 06:23:21 +0300
Subject: [PATCH] Smooth appearance of the tooltip (fixed twitching) (#8617)

---
 .../ui/src/components/TooltipInstance.svelte  | 23 ++++++++++++++-----
 .../tests/documents/documents-content.spec.ts |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index e09cd3ede8..f5ec1135fb 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -21,6 +21,7 @@
   import Component from './Component.svelte'
   import Label from './Label.svelte'
   import { capitalizeFirstLetter, formatKey } from '../utils'
+  import { testing } from '..'
 
   let tooltipHTML: HTMLElement
   let nubHTML: HTMLElement
@@ -248,6 +249,7 @@
 
   const hideTooltip = (): void => {
     if (tooltipHTML) options.visibility = 'hidden'
+    shown = false
     closeTooltip()
   }
 
@@ -319,6 +321,7 @@
 {#if $tooltip.component && $tooltip.kind !== 'submenu'}
   <div
     class="popup-tooltip {options.classList} {$tooltip.style}"
+    class:testing
     class:shown
     class:doublePadding={$tooltip.label}
     use:resizeObserver={(element) => {
@@ -374,6 +377,7 @@
       bind:this={nubHTML}
       style:z-index={($modals.findIndex((t) => t.type === 'tooltip') ?? 1) + 10000}
       class="nub {nubDirection ?? ''}"
+      class:testing
       class:shown
     />
   {/if}
@@ -467,7 +471,6 @@
     border-radius: 0.75rem;
     box-shadow: var(--theme-popup-shadow);
     user-select: none;
-    opacity: 0;
 
     &.doublePadding {
       padding: 1rem;
@@ -489,13 +492,25 @@
       background-color: var(--popup-color-disabled);
     }
   }
+  .popup-tooltip,
+  .nub {
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+
+    &.testing {
+      transition-duration: 0 !important;
+    }
+  }
+  .shown {
+    opacity: 1;
+    transition: opacity 0.1s ease-in-out 0.05s;
+  }
 
   .nub {
     position: fixed;
     // background-color: rgba(255, 255, 0, .5);
     user-select: none;
     pointer-events: none;
-    opacity: 0;
 
     &::after,
     &::before {
@@ -561,10 +576,6 @@
       transform: rotate(-90deg);
     }
   }
-  .shown {
-    transition: opacity 0.1s ease-in-out 0.15s;
-    opacity: 1;
-  }
 
   .keys {
     margin-left: 0.5rem;
diff --git a/tests/sanity/tests/documents/documents-content.spec.ts b/tests/sanity/tests/documents/documents-content.spec.ts
index 95bba3b78b..8c3a6c203e 100644
--- a/tests/sanity/tests/documents/documents-content.spec.ts
+++ b/tests/sanity/tests/documents/documents-content.spec.ts
@@ -345,7 +345,7 @@ test.describe('Content in the Documents tests', () => {
     await documentContentPage.changeCodeBlockLanguage('Line 18', 'plaintext', 'css')
     await documentContentPage.applyNote('Line 19', 'warning', testNote)
     await documentContentPage.addImage('Line 20')
-    await page.keyboard.type('Cat')
+    // await page.keyboard.type('Cat')
 
     newUser2 = generateUser()
     await createAccount(request, newUser2)