diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3188d7894..edac431a5 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1643,6 +1643,10 @@
   "swapEstimatedNetworkFee": {
     "message": "Estimated network fee"
   },
+  "swapEstimatedNetworkFeeSummary": {
+    "message": "The “$1” is what we expect the actual fee to be. The exact amount depends on network conditions.",
+    "description": "$1 will be the translation of swapEstimatedNetworkFee, with the font bolded"
+  },
   "swapEstimatedNetworkFees": {
     "message": "Estimated network fees"
   },
@@ -1677,6 +1681,9 @@
   "swapFinalizing": {
     "message": "Finalizing..."
   },
+  "swapGasFeeSummary": {
+    "message": "The gas fee covers the cost of processing your swap and storing it on the Ethereum network. MetaMask does not profit from this fee."
+  },
   "swapGetQuotes": {
     "message": "Get quotes"
   },
@@ -1705,7 +1712,8 @@
     "message": "Transaction may fail, max slippage too low."
   },
   "swapMaxNetworkFeeInfo": {
-    "message": "The Max network fee is the most you’ll pay to complete your transaction. The max fee helps ensure your Swap has the best chance of succeeding. MetaMask does not profit from network fees."
+    "message": "“$1” is the most you’ll spend. When the network is volatile this can be a large amount.",
+    "description": "$1 will be the translation of swapMaxNetworkFees, with the font bolded"
   },
   "swapMaxNetworkFees": {
     "message": "Max network fee"
diff --git a/ui/app/components/ui/info-tooltip/index.scss b/ui/app/components/ui/info-tooltip/index.scss
index ba0ca6259..cdc52fb97 100644
--- a/ui/app/components/ui/info-tooltip/index.scss
+++ b/ui/app/components/ui/info-tooltip/index.scss
@@ -5,24 +5,29 @@
   }
 }
 
-.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-top-color: $white;
 }
 
-.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-right-color: $white;
 }
 
-.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-left-color: $white;
 }
 
-.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow] {
+.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
+.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
   border-bottom-color: $white;
 }
 
 .tippy-tooltip {
-  &#{&}-info-theme {
+  &#{&}-info-theme,
+  &#{&}-wideInfo-theme {
     background: white;
     color: black;
     box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
@@ -38,4 +43,8 @@
       color: $Grey-500;
     }
   }
+
+  &#{&}-wideInfo-theme {
+    max-width: 260px;
+  }
 }
diff --git a/ui/app/components/ui/info-tooltip/info-tooltip.js b/ui/app/components/ui/info-tooltip/info-tooltip.js
index 73bf356c5..42b8af75d 100644
--- a/ui/app/components/ui/info-tooltip/info-tooltip.js
+++ b/ui/app/components/ui/info-tooltip/info-tooltip.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Tooltip from '../tooltip'
 
 const positionArrowClassMap = {
@@ -12,17 +13,21 @@ const positionArrowClassMap = {
 export default function InfoTooltip ({
   contentText = '',
   position = '',
+  containerClassName,
+  wrapperClassName,
+  wide,
 }) {
   return (
     <div className="info-tooltip">
       <Tooltip
         interactive
         position={position}
-        containerClassName="info-tooltip__tooltip-container"
+        containerClassName={classnames('info-tooltip__tooltip-container', containerClassName)}
+        wrapperClassName={wrapperClassName}
         tooltipInnerClassName="info-tooltip__tooltip-content"
         tooltipArrowClassName={positionArrowClassMap[position]}
         html={contentText}
-        theme="tippy-tooltip-info"
+        theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
       >
         <img src="images/mm-info-icon.svg" />
       </Tooltip>
@@ -33,4 +38,7 @@ export default function InfoTooltip ({
 InfoTooltip.propTypes = {
   contentText: PropTypes.string,
   position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+  wide: PropTypes.bool,
+  containerClassName: PropTypes.string,
+  wrapperClassName: PropTypes.string,
 }
diff --git a/ui/app/pages/swaps/fee-card/fee-card.js b/ui/app/pages/swaps/fee-card/fee-card.js
index 61c173015..67f2ee807 100644
--- a/ui/app/pages/swaps/fee-card/fee-card.js
+++ b/ui/app/pages/swaps/fee-card/fee-card.js
@@ -22,6 +22,30 @@ export default function FeeCard ({
             <div className="fee-card__row-header-text--bold">
               {t('swapEstimatedNetworkFee')}
             </div>
+            <InfoTooltip
+              position="top"
+              contentText={(
+                <>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapGasFeeSummary') }</p>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapEstimatedNetworkFeeSummary', [
+                    <span className="fee-card__bold" key="fee-card-bold-1">
+                      { t('swapEstimatedNetworkFee') }
+                    </span>,
+                  ]) }
+                  </p>
+                  <p className="fee-card__info-tooltip-paragraph">{ t('swapMaxNetworkFeeInfo', [
+                    <span className="fee-card__bold" key="fee-card-bold-2">
+                      { t('swapMaxNetworkFees') }
+                    </span>,
+                  ]) }
+                  </p>
+                </>
+              )
+              }
+              containerClassName="fee-card__info-tooltip-content-container"
+              wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
+              wide
+            />
           </div>
           <div>
             <div className="fee-card__row-header-secondary--bold">
@@ -42,12 +66,6 @@ export default function FeeCard ({
             <div className="fee-card__link">
               {t('edit')}
             </div>
-            <div className="fee-card__row-label">
-              <InfoTooltip
-                position="top"
-                contentText={t('swapMaxNetworkFeeInfo')}
-              />
-            </div>
           </div>
           <div>
             <div className="fee-card__row-header-secondary">
diff --git a/ui/app/pages/swaps/fee-card/index.scss b/ui/app/pages/swaps/fee-card/index.scss
index 79e08c4ad..262b7a5eb 100644
--- a/ui/app/pages/swaps/fee-card/index.scss
+++ b/ui/app/pages/swaps/fee-card/index.scss
@@ -27,7 +27,7 @@
 
   &__row-header-text,
   &__row-header-text--bold {
-    margin-right: 6px;
+    margin-right: 4px;
     cursor: pointer;
   }
 
@@ -56,6 +56,21 @@
     }
   }
 
+  &__info-tooltip-container {
+    height: 10px;
+    width: 10px;
+    justify-content: center;
+    margin-top: 2px;
+  }
+
+  &__info-tooltip-paragraph {
+    margin-bottom: 8px;
+  }
+
+  &__info-tooltip-paragraph:last-of-type {
+    margin-bottom: 0;
+  }
+
   &__row-fee {
     margin-right: 4px;
   }
@@ -109,6 +124,10 @@
   &__row-header-primary--bold {
     font-weight: bold;
   }
+
+  &__bold {
+    font-weight: bold;
+  }
 }
 
 .info-tooltip {