UI - Refactor to TooltipWrapper and add offset to the tooltips on hov…

…er of the profile aggregate status indicators (#25039)

## #25038 

Refactor to TooltipWrapper and add offset to the tooltips on hover of
the profile aggregate status indicators.

<img width="1345" alt="Screenshot 2024-12-29 at 9 00 38 PM"
src="https://github.com/user-attachments/assets/3bf5cf3c-e9fc-47dc-aa07-9cef42edcae0"
/>

- [x] Changes file added for user-visible changes in `changes/`, 
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/25038-fix-profile-status-aggregate-tooltips-spacing

@@ -0,0 +1 @@
+* Add offset to the tooltips on hover of the profile aggregate status indicators.

frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx

@@ -1,11 +1,9 @@
 import React from "react";
-import ReactTooltip from "react-tooltip";
-import { uniqueId } from "lodash";
 import classnames from "classnames";
 
 import { IconNames } from "components/icons";
 import Icon from "components/Icon";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const baseClass = "status-indicator-with-icon";
 
@@ -46,7 +44,6 @@ const StatusIndicatorWithIcon = ({
   valueClassName,
 }: IStatusIndicatorWithIconProps) => {
   const classNames = classnames(baseClass, className);
-  const id = `status-${uniqueId()}`;
 
   const valueClasses = classnames(`${baseClass}__value`, valueClassName, {
     [`${baseClass}__value-vertical`]: layout === "vertical",
@@ -59,21 +56,18 @@ const StatusIndicatorWithIcon = ({
   );
 
   const indicatorContent = tooltip ? (
-    <>
-      <span data-tip data-for={id}>
-        {valueContent}
-      </span>
-      <ReactTooltip
-        className={`${baseClass}__tooltip`}
-        place={tooltip?.position ? tooltip.position : "top"}
-        type="dark"
-        effect="solid"
-        id={id}
-        backgroundColor={COLORS["tooltip-bg"]}
-      >
-        {tooltip.tooltipText}
-      </ReactTooltip>
-    </>
+    <TooltipWrapper
+      className={`${baseClass}__tooltip`}
+      tooltipClass="indicator-tip-text"
+      position="top"
+      tipContent={tooltip.tooltipText}
+      tipOffset={10}
+      showArrow
+      underline={false}
+      fixedPositionStrategy
+    >
+      {valueContent}
+    </TooltipWrapper>
   ) : (
     <span>{valueContent}</span>
   );

frontend/components/StatusIndicatorWithIcon/_styles.scss

@@ -19,4 +19,8 @@
     flex-direction: column;
     gap: $pad-xsmall;
   }
+
+  .indicator-tip-text {
+    text-align: center;
+  }
 }

frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss

@@ -42,4 +42,8 @@
   &__status-indicator-value {
     font-weight: $bold;
   }
+
+  .icon {
+    margin-right: initial;
+  }
 }