From d94bcb81b5054d54fd0389e8d68dc58d46df2968 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 5 Jan 2026 11:53:20 -0500
Subject: [PATCH] Fleet UI: Update compatibility tooltips (#37810)

## Issue
Closes #34131

## Description
- Android tooltip was there just commented out
- Added in tooltip on ChromeOS
- Improve UX so user can click on save button easier if they opened
tooltip and won't have to hover off tooltip for it to close

## Screen recording of fixes



https://github.com/user-attachments/assets/29e81596-45b4-437c-a58f-0db7a0d013db



# Checklist for submitter


## Testing


- [x] QA'd all new/changed functionality manually
---
 .../PlatformCompatibility.tsx                 | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx b/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx
index 25cbe7f4ea..45969c8fb0 100644
--- a/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx
+++ b/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx
@@ -48,28 +48,11 @@ const displayIncompatibilityText = (err: Error) => {
   }
 };
 
-// const tipContent = (
-//   <>
-//     Estimated compatibility based on the <br />
-//     tables used in the query. Querying <br />
-//     iPhones, iPads, and Android hosts is not <br />
-//     supported.
-//   </>
-// );
-
-// TODO(android): replace with the above tipContent when Android feature flag is removed
 const tipContent = (
   <>
-    Estimated compatibility based on the <br />
-    tables used in the query. Check the <br />
-    table documentation (schema) to verify <br />
-    compatibility of individual columns.
-    <br />
-    <br />
-    Only live queries are supported on ChromeOS.
-    <br />
-    <br />
-    Querying iPhones & iPads is not supported.
+    Estimated compatibility based on the tables <br />
+    used in the query. Querying iPhones, iPads, <br />
+    and Android hosts is not supported.
   </>
 );
 
@@ -90,6 +73,15 @@ const PlatformCompatibility = ({
 
     return DISPLAY_ORDER.map((platform) => {
       const isCompatible = displayPlatforms.includes(platform);
+
+      const liveQueryOnlyPlatform = (
+        <TooltipWrapper
+          tipContent={`Only live queries are supported on ${platform}.`}
+        >
+          {platform}
+        </TooltipWrapper>
+      );
+
       return (
         <span key={`platform-compatibility__${platform}`} className="platform">
           <Icon
@@ -100,7 +92,7 @@ const PlatformCompatibility = ({
             color={isCompatible ? "status-success" : "status-error"}
             size="small"
           />
-          {platform}
+          {platform === "ChromeOS" ? liveQueryOnlyPlatform : platform}
         </span>
       );
     });
@@ -109,7 +101,7 @@ const PlatformCompatibility = ({
   return (
     <div className={baseClass}>
       <b>
-        <TooltipWrapper tipContent={tipContent}>
+        <TooltipWrapper tipContent={tipContent} clickable={false}>
           Compatible with:
         </TooltipWrapper>
       </b>