diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
index 7ea5fb3495..2d7112566e 100644
--- a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
+++ b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
@@ -1,10 +1,12 @@
 import React, { ReactNode } from "react";
 
+import ReactTooltip from "react-tooltip";
+import { uniqueId } from "lodash";
+
 import { SoftwareInstallStatus } from "interfaces/software";
 import { dateAgo } from "utilities/date_format";
 
 import Icon from "components/Icon";
-import TooltipWrapper from "components/TooltipWrapper";
 import TextCell from "components/TableContainer/DataTable/TextCell";
 
 const baseClass = "install-status-cell";
@@ -77,20 +79,30 @@ const InstallStatusCell = ({
   }
 
   const displayConfig = CELL_DISPLAY_OPTIONS[displayStatus];
+  const tooltipId = uniqueId();
 
   return (
-    <TooltipWrapper
-      tipContent={displayConfig.tooltip(packageToInstall, installedAt)}
-      underline={false}
-      className={baseClass}
-      tooltipClass={`${baseClass}__status-tooltip`}
-      position="top"
-    >
-      <div className={`${baseClass}__status-content`}>
+    <div className={`${baseClass}__status-content`}>
+      <div
+        className={`${baseClass}__status-with-tooltip`}
+        data-tip
+        data-for={tooltipId}
+      >
         <Icon name={displayConfig.iconName} />
-        <span>{displayConfig.displayText}</span>
       </div>
-    </TooltipWrapper>
+      <ReactTooltip
+        className={`${baseClass}__status-tooltip`}
+        effect="solid"
+        backgroundColor="#3e4771"
+        id={tooltipId}
+        data-html
+      >
+        <span className={`${baseClass}__status-tooltip-text`}>
+          {displayConfig.tooltip(packageToInstall, installedAt)}
+        </span>
+      </ReactTooltip>
+      <span>{displayConfig.displayText}</span>
+    </div>
   );
 };
 
diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss
index 10f8b9c53a..7384269a1e 100644
--- a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss
@@ -8,4 +8,8 @@
   &__status-tooltip {
     text-align: center;
   }
+
+  &__status-tooltip-text {
+    font-size: $xx-small;
+  }
 }
diff --git a/frontend/pages/hosts/details/cards/Software/Software.tsx b/frontend/pages/hosts/details/cards/Software/Software.tsx
index 0ce821199e..9a9476deee 100644
--- a/frontend/pages/hosts/details/cards/Software/Software.tsx
+++ b/frontend/pages/hosts/details/cards/Software/Software.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from "react";
 import { InjectedRouter } from "react-router";
 import { useQuery } from "react-query";
 import { AxiosError } from "axios";
+import { trimEnd, upperFirst } from "lodash";
 
 import hostAPI, {
   IGetHostSoftwareResponse,
@@ -166,9 +167,14 @@ const SoftwareCard = ({
           "Software is installing or will install when the host comes online."
         );
       } catch (e) {
-        const reason = getErrorReason(e);
+        const reason = upperFirst(trimEnd(getErrorReason(e), "."));
         if (reason.includes("fleetd installed")) {
-          renderFlash("error", reason);
+          renderFlash("error", `Couldn't install. ${reason}.`);
+        } else if (reason.includes("can be installed only on")) {
+          renderFlash(
+            "error",
+            `Couldn't install. ${reason.replace("darwin", "macOS")}.`
+          );
         } else {
           renderFlash("error", "Couldn't install. Please try again.");
         }