fix tooltips

dashboard/src/main/home/app-dashboard/app-view/tabs/status/ServiceVersionInstanceStatus.tsx

@@ -20,15 +20,15 @@ const ServiceVersionInstanceStatus: React.FC<Props> = ({
     <Tooltip
       backgroundColor=""
       content={
-        <InstanceTooltip>
+        <div>
           {serviceVersionInstanceStatus.name}
           <Grey>
             Restart count: {serviceVersionInstanceStatus.restartCount}
           </Grey>
           <Grey>{`Created: ${dayjs(
             serviceVersionInstanceStatus.creationTimestamp
-          ).format("MMM D, YYYY HH:mm:ss")}`}</Grey>
-        </InstanceTooltip>
+          ).format("MMM D, YYYY HH:mm:ss Z")}`}</Grey>
+        </div>
       }
       containerWidth="100%"
       tooltipContentWidth="300px"
@@ -80,38 +80,6 @@ const TooltipContainer = styled.div`
   height: 100%;
 `;
 
-const InstanceTooltip = styled.div`
-  position: absolute;
-  left: 35px;
-  word-wrap: break-word;
-  top: 38px;
-  min-height: 18px;
-  max-width: calc(100% - 75px);
-  padding: 5px 7px;
-  background: #272731;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  color: white;
-  text-transform: none;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.2s 0.15s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const Tab = styled.div<{ selected: boolean; isLast: boolean }>`
   width: 100%;
   position: relative;

dashboard/src/main/home/app-dashboard/app-view/tabs/status/StatusTags.tsx

@@ -33,12 +33,12 @@ const StatusTags: React.FC<Props<StatusType[]>> = ({ statusList }) => {
     <Status>
       <Tooltip
         content={
-          <TooltipContent>
-            <Grey>{`${statusSummary[0]} ${pluralize(
+          <div>
+            {`${statusSummary[0]} ${pluralize(
               "instance",
               statusSummary[0]
-            )} ${pluralize("is", statusSummary[0])} currently running`}</Grey>
-          </TooltipContent>
+            )} ${pluralize("is", statusSummary[0])} currently running`}
+          </div>
         }
         backgroundColor=""
       >
@@ -59,12 +59,10 @@ const StatusTags: React.FC<Props<StatusType[]>> = ({ statusList }) => {
       <Spacer inline x={0.5} />
       <Tooltip
         content={
-          <TooltipContent>
-            <Grey>{`${statusSummary[1]} ${pluralize(
-              "instance",
-              statusSummary[1]
-            )} ${pluralize("is", statusSummary[1])} currently pending`}</Grey>
-          </TooltipContent>
+          <div>{`${statusSummary[1]} ${pluralize(
+            "instance",
+            statusSummary[1]
+          )} ${pluralize("is", statusSummary[1])} currently pending`}</div>
         }
         backgroundColor=""
       >
@@ -85,12 +83,10 @@ const StatusTags: React.FC<Props<StatusType[]>> = ({ statusList }) => {
       <Spacer inline x={0.5} />
       <Tooltip
         content={
-          <TooltipContent>
-            <Grey>{`${statusSummary[2]} ${pluralize(
-              "instance",
-              statusSummary[2]
-            )} ${pluralize("is", statusSummary[2])} currently failing`}</Grey>
-          </TooltipContent>
+          <div>{`${statusSummary[2]} ${pluralize(
+            "instance",
+            statusSummary[2]
+          )} ${pluralize("is", statusSummary[2])} currently failing`}</div>
         }
         backgroundColor=""
       >
@@ -119,40 +115,3 @@ const InnerTag = styled.div`
   align-items: center;
   width: 25px;
 `;
-
-const TooltipContent = styled.div`
-  position: absolute;
-  left: 35px;
-  word-wrap: break-word;
-  top: 38px;
-  min-height: 18px;
-  max-width: calc(100% - 75px);
-  padding: 5px 7px;
-  background: #272731;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  color: white;
-  text-transform: none;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.2s 0.15s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const Grey = styled.div`
-  margin-top: 5px;
-  color: #aaaabb;
-`;