Update tooltip for pending profiles (#20512)

changes/19646-ui-profiles-pending-tooltip

@@ -0,0 +1 @@
+- Updated UI tooltips for pending OS settings.

frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/ProfileStatusAggregateOptions.ts

@@ -28,7 +28,7 @@ const AGGREGATE_STATUS_DISPLAY_OPTIONS: IAggregateDisplayOption[] = [
     text: "Pending",
     iconName: "pendingPartial",
     tooltipText:
-      "These hosts will receive MDM command to apply OS settings when the host come online.",
+      "These hosts will apply the latest OS settings. Click on a host to view which settings.",
   },
   {
     value: "failed",

frontend/pages/hosts/details/cards/HostSummary/OSSettingsIndicator/OSSettingsIndicator.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import ReactTooltip from "react-tooltip";
 
 import { IHostMdmProfile, MdmProfileStatus } from "interfaces/mdm";
 
 import Icon from "components/Icon";
 import Button from "components/buttons/Button";
 import { IconNames } from "components/icons";
-import { COLORS } from "styles/var/colors";
 
 const baseClass = "os-settings-indicator";
 
@@ -21,7 +19,6 @@ interface IStatusDisplayOption {
     IconNames,
     "success" | "success-outline" | "pending" | "pending-outline" | "error"
   >;
-  tooltipText: string;
 }
 type StatusDisplayOptions = Record<
   MdmProfileStatusForDisplay,
@@ -31,23 +28,15 @@ type StatusDisplayOptions = Record<
 const STATUS_DISPLAY_OPTIONS: StatusDisplayOptions = {
   Verified: {
     iconName: "success",
-    tooltipText: "These hosts applied all OS settings. Fleet verified.",
   },
   Verifying: {
     iconName: "success-outline",
-    tooltipText:
-      "The host acknowledged all MDM commands to apply OS settings. " +
-      "Fleet is verifying the OS settings are applied with osquery.",
   },
   Pending: {
     iconName: "pending-outline",
-    tooltipText:
-      "The host will receive MDM command to apply OS settings when the host comes online.",
   },
   Failed: {
     iconName: "error",
-    tooltipText:
-      "The host failed to apply the latest OS settings. Click to view error(s).",
   },
 };
 
@@ -128,31 +117,13 @@ const OSSettingsIndicator = ({
   return (
     <span className={`${baseClass} info-flex__data`}>
       <Icon name={statusDisplayOption.iconName} />
-      <span
-        className="tooltip tooltip__tooltip-icon"
-        data-tip
-        data-for={`${baseClass}-tooltip`}
-        data-tip-disable={false}
+      <Button
+        onClick={onClick}
+        variant="text-link"
+        className={`${baseClass}__button`}
       >
-        <Button
-          onClick={onClick}
-          variant="text-link"
-          className={`${baseClass}__button`}
-        >
-          {displayStatus}
-        </Button>
-      </span>
-      <ReactTooltip
-        place="bottom"
-        effect="solid"
-        backgroundColor={COLORS["tooltip-bg"]}
-        id={`${baseClass}-tooltip`}
-        data-html
-      >
-        <span className="tooltip__tooltip-text">
-          {statusDisplayOption.tooltipText}
-        </span>
-      </ReactTooltip>
+        {displayStatus}
+      </Button>
     </span>
   );
 };