From aba902cf9ce2f116861fea6cc3adb173ef1639b1 Mon Sep 17 00:00:00 2001
From: KrivovDE <208969570+kunzite16@users.noreply.github.com>
Date: Wed, 9 Sep 2026 17:05:25 +0300
Subject: [PATCH] Animate delayed search filter tooltips

---
 assets/css/main.css | 17 +++++++++++--
 assets/js/app.js    | 58 ++++++++++++++++++++++++++++-----------------
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index c1af3d7..5e0e3f0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3717,7 +3717,7 @@ body.organization-view:not(.expanded) #content>#stability>.bankruptcy-timeline{
 .search-result-filters-tooltip{
   position:fixed;
   z-index:1000;
-  display:none;
+  display:block;
   width:max-content;
   max-width:min(30rem,70vw);
   padding:.625rem .75rem;
@@ -3726,15 +3726,28 @@ body.organization-view:not(.expanded) #content>#stability>.bankruptcy-timeline{
   color:#e2e7e9;
   background:#262a2c;
   box-shadow:0 .5rem 1.25rem rgba(0,0,0,.45);
+  opacity:0;
   pointer-events:none;
+  transform:translateY(-.375rem) scale(.985);
+  transform-origin:top left;
+  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s;
+  visibility:hidden;
   white-space:normal;
+  will-change:opacity,transform;
 }
 .search-result-filters-tooltip span{
   display:block;
   padding:.1875rem 0;
 }
 .search-result-filters-tooltip.is-visible{
-  display:block;
+  opacity:1;
+  transform:translateY(0) scale(1);
+  transition-delay:0s;
+  visibility:visible;
+}
+
+@media(prefers-reduced-motion:reduce){
+  .search-result-filters-tooltip{transition:none;transform:none}
 }
 
 @media(max-width:64rem){
diff --git a/assets/js/app.js b/assets/js/app.js
index ae6c1f0..8ae02dd 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1323,20 +1323,27 @@ const renderSearchResults=()=>{
       const tooltipText=document.createElement('span');
       tooltipText.textContent=fullText;
       tooltip.append(tooltipText);
+      let tooltipTimer=0;
       const showTooltip=()=>{
         if(item.scrollWidth<=item.clientWidth)return;
-        tooltip.classList.add('is-visible');
-        const anchorRect=item.getBoundingClientRect();
-        const tooltipRect=tooltip.getBoundingClientRect();
-        const left=Math.max(.5*16,Math.min(anchorRect.left,innerWidth-tooltipRect.width-.5*16));
-        const below=anchorRect.bottom+.5*16;
-        const top=below+tooltipRect.height<=innerHeight-.5*16
-          ? below
-          : Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
-        tooltip.style.left=`${left}px`;
-        tooltip.style.top=`${top}px`;
+        clearTimeout(tooltipTimer);
+        tooltipTimer=setTimeout(()=>{
+          const anchorRect=item.getBoundingClientRect();
+          const tooltipRect=tooltip.getBoundingClientRect();
+          const left=Math.max(.5*16,Math.min(anchorRect.left,innerWidth-tooltipRect.width-.5*16));
+          const below=anchorRect.bottom+.5*16;
+          const top=below+tooltipRect.height<=innerHeight-.5*16
+            ? below
+            : Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
+          tooltip.style.left=`${left}px`;
+          tooltip.style.top=`${top}px`;
+          tooltip.classList.add('is-visible');
+        },420);
+      };
+      const hideTooltip=()=>{
+        clearTimeout(tooltipTimer);
+        tooltip.classList.remove('is-visible');
       };
-      const hideTooltip=()=>tooltip.classList.remove('is-visible');
       item.addEventListener('mouseenter',showTooltip);
       item.addEventListener('mouseleave',hideTooltip);
       item.addEventListener('focus',showTooltip);
@@ -1374,19 +1381,26 @@ const renderSearchResults=()=>{
         tooltip.append(item);
       });
       more.setAttribute('aria-describedby',tooltipId);
+      let tooltipTimer=0;
       const showTooltip=()=>{
-        tooltip.classList.add('is-visible');
-        const anchorRect=more.getBoundingClientRect();
-        const tooltipRect=tooltip.getBoundingClientRect();
-        const left=Math.max(.5*16,Math.min(anchorRect.right-tooltipRect.width,innerWidth-tooltipRect.width-.5*16));
-        const below=anchorRect.bottom+.5*16;
-        const top=below+tooltipRect.height<=innerHeight-.5*16
-          ? below
-          : Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
-        tooltip.style.left=`${left}px`;
-        tooltip.style.top=`${top}px`;
+        clearTimeout(tooltipTimer);
+        tooltipTimer=setTimeout(()=>{
+          const anchorRect=more.getBoundingClientRect();
+          const tooltipRect=tooltip.getBoundingClientRect();
+          const left=Math.max(.5*16,Math.min(anchorRect.right-tooltipRect.width,innerWidth-tooltipRect.width-.5*16));
+          const below=anchorRect.bottom+.5*16;
+          const top=below+tooltipRect.height<=innerHeight-.5*16
+            ? below
+            : Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
+          tooltip.style.left=`${left}px`;
+          tooltip.style.top=`${top}px`;
+          tooltip.classList.add('is-visible');
+        },420);
+      };
+      const hideTooltip=()=>{
+        clearTimeout(tooltipTimer);
+        tooltip.classList.remove('is-visible');
       };
-      const hideTooltip=()=>tooltip.classList.remove('is-visible');
       more.addEventListener('mouseenter',showTooltip);
       more.addEventListener('mouseleave',hideTooltip);
       more.addEventListener('focus',showTooltip);