Fix tooltip positioning to appear below headers

- Change tooltip position from above to below (top instead of bottom)
- Add overflow-y visible to prevent clipping by table container
- Increase padding and add shadow for better visibility

Author: stirby

site/index.html

@@ -33,22 +33,22 @@
     .tooltip::after {
       content: attr(data-tooltip);
       position: absolute;
-      z-index: 50;
+      z-index: 9999;
       visibility: hidden;
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
       background-color: #18181b;
       color: #fff;
       font-size: 0.75rem;
       font-weight: 400;
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
       white-space: nowrap;
-      bottom: 100%;
+      top: calc(100% + 0.5rem);
       left: 50%;
       transform: translateX(-50%);
-      margin-bottom: 0.5rem;
       pointer-events: none;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
     .dark .tooltip::after {
       background-color: #f4f4f5;
@@ -58,6 +58,17 @@
       visibility: visible;
       opacity: 1;
     }
+    /* Allow tooltips to overflow table container */
+    thead {
+      overflow: visible !important;
+    }
+    thead th {
+      overflow: visible !important;
+    }
+    /* The table wrapper needs overflow-y visible for tooltips above */
+    .overflow-x-auto {
+      overflow-y: visible !important;
+    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="config.js"></script>