fix(compass-indexes): fix tooltip triggers in indexes plugin COMPASS-8449 (#6844)

lerouxb · web-flow · commit 38228c74b673 · 2025-04-08T20:17:54.000+01:00
fix tooltip triggers in indexes plugin
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx
@@ -43,7 +43,16 @@ const PropertyBadgeWithTooltip: React.FunctionComponent<{
   return (
     <Tooltip
       enabled={!!tooltip}
-      trigger={<BadgeWithIconLink link={link} text={text} />}
+      trigger={({
+        children: tooltipChildren,
+        ...tooltipTriggerProps
+      }: React.HTMLProps<HTMLDivElement>) => (
+        <div {...tooltipTriggerProps}>
+          <BadgeWithIconLink link={link} text={text} />
+          {tooltipChildren}
+        </div>
+      )}
+      triggerEvent="hover"
     >
       <Body>{tooltip}</Body>
     </Tooltip>
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx
@@ -35,11 +35,17 @@ const BadgeWithTooltip: React.FunctionComponent<{
     <Tooltip
       enabled={!!tooltip}
       darkMode={darkMode}
-      trigger={
-        <Badge data-testid={dataTestId} variant={variant}>
-          {children}
-        </Badge>
-      }
+      trigger={({
+        children: tooltipChildren,
+        ...tooltipTriggerProps
+      }: React.HTMLProps<HTMLDivElement>) => (
+        <div {...tooltipTriggerProps}>
+          <Badge data-testid={dataTestId} variant={variant}>
+            {children}
+          </Badge>
+          {tooltipChildren}
+        </div>
+      )}
     >
       <Body>{tooltip}</Body>
     </Tooltip>
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/type-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/type-field.tsx
@@ -44,9 +44,15 @@ const TypeField: React.FunctionComponent<TypeFieldProps> = ({
   return (
     <Tooltip
       enabled={canRenderTooltip(type)}
-      trigger={
-        <BadgeWithIconLink text={type ?? 'unknown'} link={link ?? '#'} />
-      }
+      trigger={({
+        children: tooltipChildren,
+        ...tooltipTriggerProps
+      }: React.HTMLProps<HTMLDivElement>) => (
+        <div {...tooltipTriggerProps}>
+          <BadgeWithIconLink text={type ?? 'unknown'} link={link ?? '#'} />
+          {tooltipChildren}
+        </div>
+      )}
     >
       {extra && <IndexTypeTooltip extra={extra} />}
     </Tooltip>
diff --git a/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx b/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx
@@ -148,9 +148,15 @@ function VectorSearchIndexDetails({ definition }: { definition: Document }) {
             align="top"
             key={field.path}
             justify="middle"
-            trigger={
-              <Badge className={searchIndexFieldStyles}>{field.path}</Badge>
-            }
+            trigger={({
+              children: tooltipChildren,
+              ...tooltipTriggerProps
+            }: React.HTMLProps<HTMLDivElement>) => (
+              <div {...tooltipTriggerProps}>
+                <Badge className={searchIndexFieldStyles}>{field.path}</Badge>
+                {tooltipChildren}
+              </div>
+            )}
           >
             {JSON.stringify(field, null, 2)}
           </Tooltip>
