fix(perf): Add tooltip to vitals bar on vitals widget (#30214)

This adds a tooltip with the percents breakdown for the vital bars in the vital widget, as well as cleaning up some alignment issues on the cells.

static/app/views/performance/landing/vitalsCards.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import {Location} from 'history';
 
+import Tooltip from 'app/components/tooltip';
 import Card from 'sentry/components/card';
 import EventsRequest from 'sentry/components/charts/eventsRequest';
 import {HeaderTitle} from 'sentry/components/charts/styles';
@@ -353,6 +354,7 @@ type VitalBarProps = {
   showDurationDetail?: boolean;
   showVitalPercentNames?: boolean;
   showDetail?: boolean;
+  showTooltip?: boolean;
   barHeight?: number;
 };
 
@@ -367,6 +369,7 @@ export function VitalBar(props: VitalBarProps) {
     showDurationDetail = false,
     showVitalPercentNames = false,
     showDetail = true,
+    showTooltip = false,
     barHeight,
   } = props;
 
@@ -406,7 +409,22 @@ export function VitalBar(props: VitalBarProps) {
 
   return (
     <React.Fragment>
-      {showBar && <ColorBar barHeight={barHeight} colorStops={colorStops} />}
+      {showBar && (
+        <StyledTooltip
+          title={
+            <VitalPercents
+              vital={vital}
+              percents={percents}
+              showVitalPercentNames
+              hideTooltips={showTooltip}
+            />
+          }
+          disabled={!showTooltip}
+          position="bottom"
+        >
+          <ColorBar barHeight={barHeight} colorStops={colorStops} />
+        </StyledTooltip>
+      )}
       {showDetail && (
         <BarDetail>
           {showDurationDetail && p75 && (
@@ -473,6 +491,10 @@ const StyledCard = styled(Card)<{minHeight?: number}>`
   ${p => p.minHeight && `min-height: ${p.minHeight}px`};
 `;
 
+const StyledTooltip = styled(Tooltip)`
+  width: 100%;
+`;
+
 function getP75(data: VitalData | null, vitalName: WebVital): string {
   const p75 = data?.p75 ?? null;
   if (p75 === null) {

static/app/views/performance/landing/widgets/components/selectableList.tsx

@@ -55,6 +55,9 @@ function SelectableItem({
 
 export const RightAlignedCell = styled('div')`
   text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const Subtitle = styled('span')`
@@ -75,18 +78,24 @@ export function ListClose(props: {
 }) {
   return (
     <CloseContainer>
-      <Tooltip title={t('Exclude this transaction from the search filter.')}>
+      <StyledTooltip title={t('Exclude this transaction from the search filter.')}>
         <StyledIconClose
           onClick={() => {
             props.onClick();
             props.setSelectListIndex(0);
           }}
         />
-      </Tooltip>
+      </StyledTooltip>
     </CloseContainer>
   );
 }
 
+const StyledTooltip = styled(Tooltip)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const CloseContainer = styled('div')`
   display: flex;
   align-items: center;

static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx

@@ -315,7 +315,8 @@ export function VitalWidget(props: Props) {
                         showBar
                         showDurationDetail={false}
                         showDetail={false}
-                        barHeight={24}
+                        showTooltip
+                        barHeight={20}
                       />
                     </VitalBarCell>
                     <ListClose

static/app/views/performance/vitalDetail/vitalPercents.tsx

@@ -17,6 +17,7 @@ type Props = {
   vital: WebVital | WebVital[];
   percents: Percent[];
   showVitalPercentNames?: boolean;
+  hideTooltips?: boolean;
 };
 
 function getVitalStateText(vital: WebVital | WebVital[], vitalState) {
@@ -47,6 +48,7 @@ export default function VitalPercents(props: Props) {
           <Tooltip
             key={pct.vitalState}
             title={getVitalStateText(props.vital, pct.vitalState)}
+            disabled={props.hideTooltips}
           >
             <VitalStatus>
               {vitalStateIcons[pct.vitalState]}