fix text alignment for host status pill (#34851)

**Related issue:** Fixes #34820

This fixes the text alignment of the tooltip for the host status pill.
We replace the current tooltip implementationt use TooltipWrapper so
that its consistant with all other tooltips

frontend/pages/hosts/details/cards/HostHeader/HostHeader.tsx

@@ -179,19 +179,14 @@ const HostHeader = ({
 
     return (
       <>
-        <span className={classNames} data-tip data-for="tag-tooltip">
-          {tag.title}
-        </span>
-        <ReactTooltip
-          place="top"
-          effect="solid"
-          id="tag-tooltip"
-          backgroundColor={COLORS["tooltip-bg"]}
+        <TooltipWrapper
+          tipContent={tag.generateTooltip(platform)}
+          position="top"
+          underline={false}
+          showArrow
         >
-          <span className={`${baseClass}__tooltip-text`}>
-            {tag.generateTooltip(platform)}
-          </span>
-        </ReactTooltip>
+          <span className={classNames}>{tag.title}</span>
+        </TooltipWrapper>
       </>
     );
   };

frontend/pages/hosts/details/cards/HostHeader/helpers.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { isMacOS, isAppleDevice, isIPadOrIPhone } from "interfaces/platform";
+import { isMacOS, isIPadOrIPhone } from "interfaces/platform";
 import { HostMdmDeviceStatusUIState } from "../../helpers";
 
 interface IDeviceStatusTag {
@@ -61,8 +61,13 @@ export const DEVICE_STATUS_TAGS: DeviceStatusTagConfig = {
   locking: {
     title: "LOCK PENDING",
     tagType: "warning",
-    generateTooltip: () =>
-      "Host will lock when it comes online.  If the host is online, it will lock the next time it checks in to Fleet.",
+    generateTooltip: () => (
+      <>
+        Host will lock when it comes online. If the host is
+        <br />
+        online, it will lock the next time it checks in to Fleet.
+      </>
+    ),
   },
   wiped: {
     title: "WIPED",