🩹 changing tooltip behaviour

chrede88 · Nov 7, 2023 · 3429f41 · 3429f41
1 parent 264af50
commit 3429f41
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -754,6 +754,7 @@ video {
 }
 
 .tooltip {
+  visibility: hidden;
   position: absolute;
   top: -2.5rem;
 }
@@ -783,16 +784,11 @@ video {
   text-align: center;
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity));
-  opacity: 0;
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   --tw-shadow-color: rgb(3 7 18 / 0.25);
   --tw-shadow: var(--tw-shadow-colored);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
 .tooltip::after {
@@ -817,7 +813,7 @@ video {
 
 @media (hover: hover) and (pointer: fine) {
   .group:hover .tooltip {
-    opacity: 1;
+    visibility: visible;
   }
 }
 

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -35,11 +35,11 @@
 }
 
 .tooltip {
-  @apply absolute -top-10 text-center rounded-md px-2 py-1
-  whitespace-nowrap shadow-md shadow-gray-950/25
-  dark:shadow-slate-100/25 bg-gray-950 text-slate-50 
-  dark:bg-slate-100 dark:text-slate-700 animate-bounce
-  group-hover:opacity-100 opacity-0 transition-opacity ease-out duration-300
+  @apply invisible group-hover:visible absolute -top-10
+  text-center rounded-md px-2 py-1 whitespace-nowrap
+  shadow-md shadow-gray-950/25 dark:shadow-slate-100/25
+  bg-gray-950 text-slate-50 dark:bg-slate-100
+  dark:text-slate-700 animate-bounce
   after:absolute after:w-0 after:h-0 after:border-4 after:top-7
   after:left-1/2 after:-translate-x-1/2 after:rotate-45
   after:shadow-md after:shadow-gray-950/25 after:border-gray-950