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
This commit is contained in:
RachelElysia
2026-01-05 10:53:20 -06:00
committed by GitHub
parent 04685db892
commit d94bcb81b5
@@ -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>