changed to qwik ui tooltip (for now it's 0.5.0, we'll upgrade later)

Author: shairez

packages/insights/package.json

@@ -19,6 +19,7 @@
     "@builder.io/vite-plugin-macro": "0.0.7",
     "@eslint/js": "9.25.1",
     "@netlify/edge-functions": "2.10.0",
+    "@qwik-ui/headless": "0.5.0",
     "@tailwindcss/vite": "4.0.12",
     "@types/density-clustering": "1.3.3",
     "@types/node": "20.14.11",

packages/insights/src/components/popup-manager/index.tsx

@@ -3,7 +3,7 @@ import { server$, useLocation } from '@builder.io/qwik-city';
 import { and, eq } from 'drizzle-orm';
 import { getDB, symbolDetailTable } from '~/db';
 import { SymbolIcon } from '../icons/symbol';
-import { type PopupEvent } from '../popup-manager';
+import { TooltipWrapper } from '../tooltip';
 
 export const SymbolPopup = component$<{ symbolHash: string }>(({ symbolHash }) => (
   <div class="min-w-[500px] max-w-[75vw]">
@@ -89,10 +89,12 @@ export const SymbolSource = component$<{ symbolHash: string }>(({ symbolHash })
 
 export const SymbolTile = component$<{ symbol: string }>(({ symbol }) => {
   return (
-    <code onPopup$={(e: PopupEvent) => e.detail.show(SymbolPopup, { symbolHash: symbol })}>
-      <SymbolIcon />
-      <span class="ml-1">{symbol}</span>
-    </code>
+    <TooltipWrapper content={SymbolPopup} contentProps={{ symbolHash: symbol }} placement="right">
+      <code>
+        <SymbolIcon />
+        <span class="ml-1">{symbol}</span>
+      </code>
+    </TooltipWrapper>
   );
 });
 

packages/insights/src/components/symbol-tile/index.tsx

@@ -0,0 +1,24 @@
+import { component$, Slot, type Component } from '@builder.io/qwik';
+import { Tooltip } from '@qwik-ui/headless';
+
+interface TooltipWrapperProps {
+  content: Component<any>;
+  contentProps?: any;
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  gutter?: number;
+}
+
+export const TooltipWrapper = component$<TooltipWrapperProps>(
+  ({ content: ContentComponent, contentProps, placement = 'top', gutter = 8 }) => {
+    return (
+      <Tooltip.Root hover floating={placement} gutter={gutter} flip>
+        <Tooltip.Trigger>
+          <Slot />
+        </Tooltip.Trigger>
+        <Tooltip.Content class="tooltip-panel bg-white border border-slate-200 shadow-lg rounded-md p-0 z-50 max-w-[75vw] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95">
+          <ContentComponent {...contentProps} />
+        </Tooltip.Content>
+      </Tooltip.Root>
+    );
+  }
+);

packages/insights/src/components/tooltip/index.tsx

@@ -1,9 +1,9 @@
-import { type ReadonlySignal, component$ } from '@builder.io/qwik';
+import { component$, type ReadonlySignal } from '@builder.io/qwik';
 import { routeLoader$ } from '@builder.io/qwik-city';
-import { getDB, errorTable, type ErrorRow } from '~/db';
 import { eq, sql } from 'drizzle-orm';
 import { ErrorIcon } from '~/components/icons/error';
-import { type PopupEvent } from '~/components/popup-manager';
+import { TooltipWrapper } from '~/components/tooltip';
+import { errorTable, getDB, type ErrorRow } from '~/db';
 
 export const useErrors = routeLoader$(async ({ params }) => {
   const db = getDB();
@@ -41,23 +41,21 @@ export default component$(() => {
         </thead>
         <tbody>
           {errors.value.map((error) => (
-            <tr
-              key={error.id}
-              onPopup$={(e: PopupEvent) => e.detail.show(Popup, error)}
-              class="border-b border-slate-200 text-xs"
-            >
-              <td scope="col" class="px-6 py-3 bg-slate-50 whitespace-nowrap">
-                {new Date(error.timestamp).toLocaleString()}
-              </td>
-              <td scope="col" class="px-6 py-3 max-w-lg break-words">
-                <a href={error.url} target="_blank">
-                  {error.url}
-                </a>
-              </td>
-              <td scope="col" class="px-6 py-3 bg-slate-50">
-                {error.message}
-              </td>
-            </tr>
+            <TooltipWrapper key={error.id} content={Popup} contentProps={error} placement="left">
+              <tr class="border-b border-slate-200 text-xs hover:bg-slate-50 cursor-pointer">
+                <td scope="col" class="px-6 py-3 bg-slate-50 whitespace-nowrap">
+                  {new Date(error.timestamp).toLocaleString()}
+                </td>
+                <td scope="col" class="px-6 py-3 max-w-lg break-words">
+                  <a href={error.url} target="_blank">
+                    {error.url}
+                  </a>
+                </td>
+                <td scope="col" class="px-6 py-3 bg-slate-50">
+                  {error.message}
+                </td>
+              </tr>
+            </TooltipWrapper>
           ))}
         </tbody>
       </table>

packages/insights/src/routes/app/[publicApiKey]/errors/index.tsx

@@ -1,8 +1,7 @@
 import { Slot, component$ } from '@builder.io/qwik';
 
-import { PopupManager } from '~/components/popup-manager';
-import { routeLoader$ } from '@builder.io/qwik-city';
 import type { GetSessionResult } from '@auth/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
 
 export type SessionData = Awaited<GetSessionResult>['data'];
 
@@ -16,9 +15,5 @@ export const useUserSession = routeLoader$(({ sharedMap, redirect, url }) => {
 });
 
 export default component$(() => {
-  return (
-    <PopupManager>
-      <Slot />
-    </PopupManager>
-  );
+  return <Slot />;
 });