Ensure buttons are never hidden by the hovercards - enhancing the pressability of the buttons

Author: louispt1

app/components/hovercard/component.html.erb

@@ -5,10 +5,10 @@
 >
   <%= content %>
 
-<%# static card %>
-<%# should make text optional and setup the @path with turbo see: https://boringrails.com/articles/hovercards-stimulus/ %>
-  <div class="relative opacity-0 transition delay-500 duration-300" data-hovercard-target="card">
-    <div data-tooltip-arrow class="absolute top-0 <%= placement_class %> z-50 shadow-lg rounded-lg p-3 min-w-max bg-midnight-300 text-midnight-800">
+  <%# static card %>
+  <%# should make text optional and setup the @path with turbo see: https://boringrails.com/articles/hovercards-stimulus/ %>
+  <div class="relative hidden opacity-0 pointer-events-none transition delay-500 duration-300" data-hovercard-target="card">
+    <div data-tooltip-arrow class="absolute top-0 <%= placement_class %> z-10 shadow-lg rounded-lg p-3 min-w-max bg-midnight-300 text-midnight-800">
       <div class="flex space-x-3 items-center max-w-s text-sm">
         <%= @text %>
       </div>

app/javascript/controllers/hovercard_controller.js

@@ -6,10 +6,11 @@ export default class extends Controller {
 
   show() {
     if (this.hasCardTarget) {
-      this.cardTarget.classList.add("delay-500");
-      this.cardTarget.classList.remove("hidden");
-      this.cardTarget.classList.add("opacity-100");
-      this.cardTarget.classList.remove("opacity-0");
+      setTimeout(() => {
+        this.cardTarget.classList.remove("hidden", "pointer-events-none");
+        this.cardTarget.classList.add("opacity-100");
+        this.cardTarget.classList.remove("opacity-0");
+      }, 150);
     } else {
       fetch(this.urlValue)
         .then((r) => r.text())
@@ -25,10 +26,11 @@ export default class extends Controller {
 
   hide() {
     if (this.hasCardTarget) {
-      this.cardTarget.classList.add("opacity-0");
-      this.cardTarget.classList.remove("delay-500");
+      this.cardTarget.classList.add("opacity-0", "pointer-events-none");
       this.cardTarget.classList.remove("opacity-100");
-      this.cardTarget.classList.add("hidden");
+      setTimeout(() => {
+        this.cardTarget.classList.add("hidden");
+      }, 300);
     }
   }
 
@@ -38,4 +40,3 @@ export default class extends Controller {
     }
   }
 }
-