From 2371b6a200c04563141ff1fb9ac536eae26b1027 Mon Sep 17 00:00:00 2001
From: Apotheosis <0xapotheosis@gmail.com>
Date: Thu, 5 Dec 2024 18:46:45 +1100
Subject: [PATCH] fix: portals tooltip overlay (#8290)

---
 .../MultiHopTradeConfirm/components/Hop.tsx   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx
index 2f5f8de28d7..48034a32e7c 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx
@@ -309,24 +309,32 @@ export const Hop = ({
       <Divider width='auto' ml={6} borderColor='border.base' opacity={1} />
       <CardFooter fontSize='sm' pl={8}>
         <HStack width='full' justifyContent='space-between'>
-          {/* Hovering over this should render a popover with details */}
-          <Tooltip label={translate('trade.tooltip.gasFee')}>
+          <Tooltip
+            label={translate(
+              networkFeeFiatUserCurrency
+                ? 'trade.tooltip.gasFee'
+                : 'trade.tooltip.continueSwapping',
+            )}
+          >
             <Flex alignItems='center' gap={2}>
               <Flex color='text.subtle'>
                 <FaGasPump />
               </Flex>
               {!networkFeeFiatUserCurrency ? (
-                <Tooltip label={translate('trade.tooltip.continueSwapping')}>
-                  <Text translation={'trade.unknownGas'} fontSize='sm' />
-                </Tooltip>
+                <Text translation={'trade.unknownGas'} fontSize='sm' />
               ) : (
                 <Amount.Fiat value={networkFeeFiatUserCurrency} display='inline' />
               )}
             </Flex>
           </Tooltip>
 
-          {/* Hovering over this should render a popover with details */}
-          <Tooltip label={translate('trade.tooltip.protocolFee')}>
+          <Tooltip
+            label={translate(
+              protocolFeeFiatPrecision
+                ? 'trade.tooltip.protocolFee'
+                : 'trade.tooltip.continueSwapping',
+            )}
+          >
             <Flex alignItems='center' gap={2}>
               <Flex color='text.subtle'>
                 <ProtocolIcon />