Gas Timing with Negative attitude should be bold with tooltip (#11772)

app/_locales/en/messages.json

@@ -714,6 +714,9 @@
   "editGasTooLowTooltip": {
     "message": "Your max fee or max priority fee may be low for current market conditions. We don't know when (or if) your transaction will be processed. "
   },
+  "editGasTooLowWarningTooltip": {
+    "message": "This lowers your maximum fee but if network traffic increases your transaction may be delayed or fail."
+  },
   "editNonceField": {
     "message": "Edit Nonce"
   },

ui/components/app/gas-timing/gas-timing.component.js

@@ -126,7 +126,6 @@ export default function GasTiming({
 
   let text = '';
   let attitude = 'positive';
-  let fontWeight = FONT_WEIGHT.NORMAL;
 
   // Anything medium or faster is positive
   if (
@@ -159,7 +158,6 @@ export default function GasTiming({
         customEstimatedTime === 'unknown' ||
         customEstimatedTime?.upperTimeBound === 'unknown'
       ) {
-        fontWeight = FONT_WEIGHT.BOLD;
         text = unknownProcessingTimeText;
       } else {
         text = t('gasTimingNegative', [
@@ -167,16 +165,23 @@ export default function GasTiming({
         ]);
       }
     } else {
-      text = t('gasTimingNegative', [
+      text = (
+        <>
+          {t('gasTimingNegative', [
             toHumanReadableTime(low.maxWaitTimeEstimate, t),
-      ]);
+          ])}
+          <InfoTooltip
+            position="top"
+            contentText={t('editGasTooLowWarningTooltip')}
+          />
+        </>
+      );
     }
   }
 
   return (
     <Typography
       variant={TYPOGRAPHY.H7}
-      fontWeight={fontWeight}
       className={classNames('gas-timing', {
         [`gas-timing--${attitude}`]: attitude,
       })}

ui/components/app/gas-timing/index.scss

@@ -11,6 +11,7 @@
 
   &--negative {
     color: $error-1;
+    font-weight: bold;
   }
 
   .info-tooltip {

ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap

@@ -52,7 +52,7 @@ exports[`FeeCard renders the component with EIP-1559 enabled 2`] = `
         class="fee-card__info-tooltip-container"
       >
         <div
-          aria-describedby="tippy-tooltip-6"
+          aria-describedby="tippy-tooltip-7"
           class="info-tooltip__tooltip-container"
           data-original-title="null"
           data-tooltipped=""