diff --git a/components/Input/Address/AddressPicker/AddressWithIcon.tsx b/components/Input/Address/AddressPicker/AddressWithIcon.tsx
index c49a596ce..58d748012 100644
--- a/components/Input/Address/AddressPicker/AddressWithIcon.tsx
+++ b/components/Input/Address/AddressPicker/AddressWithIcon.tsx
@@ -126,6 +126,8 @@ type ExtendedAddressProps = {
     children?: ReactNode
     shouldShowChevron?: boolean
     isNativeToken?: boolean;
+    onPopoverOpenChange?: (open: boolean) => void;
+    onTooltipOpenChange?: (open: boolean) => void;
 }
 
 const calculateMaxWidth = (balance: string | undefined) => {
@@ -140,10 +142,15 @@ const calculateMaxWidth = (balance: string | undefined) => {
     }
 };
 
-export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true, isNativeToken = false }) => {
+export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true, isNativeToken = false, onPopoverOpenChange, onTooltipOpenChange }) => {
     const [isCopied, setCopied] = useCopyClipboard()
     const [isPopoverOpen, setPopoverOpen] = useState(false)
 
+    const handlePopoverChange = (open: boolean) => {
+        setPopoverOpen(open)
+        onPopoverOpenChange?.(open)
+    }
+
     // Resolver for action buttons
     const getActionButtons = () => {
         if (isNativeToken) return { buttons: [], showTitles: false };
@@ -176,10 +183,10 @@ export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, is
 
     return (
         <div onClick={(e) => e.stopPropagation()}>
-            <Popover open={isPopoverOpen} onOpenChange={() => setPopoverOpen(!isPopoverOpen)} modal={true}>
+            <Popover open={isPopoverOpen} onOpenChange={handlePopoverChange} modal={true}>
                 <PopoverTrigger asChild>
                     <div>
-                        <Tooltip>
+                        <Tooltip onOpenChange={onTooltipOpenChange}>
                             <TooltipTrigger asChild>
                                 {
                                     children ??
@@ -194,7 +201,7 @@ export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, is
                                     </div>
                                 }
                             </TooltipTrigger>
-                            <TooltipContent side="bottom">
+                            <TooltipContent side="bottom" className="pointer-events-none">
                                 <p>{isForCurrency ? "View token details" : "View address details"}</p>
                             </TooltipContent>
                         </Tooltip>
diff --git a/components/Input/RoutePicker/Routes.tsx b/components/Input/RoutePicker/Routes.tsx
index 8404c9260..f7ad71155 100644
--- a/components/Input/RoutePicker/Routes.tsx
+++ b/components/Input/RoutePicker/Routes.tsx
@@ -43,7 +43,7 @@ type NetworkTokenItemProps = {
 }
 
 export const NetworkTokenTitle = (props: NetworkTokenItemProps) => {
-    const { item, route, direction, type } = props
+    const { item, route, direction } = props
     const swapAccounts = useSwapAccounts(direction)
     const selectedAccount = swapAccounts?.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.name));
 
@@ -68,7 +68,7 @@ export const NetworkTokenTitle = (props: NetworkTokenItemProps) => {
                 <TokenInfoIcon
                     item={item}
                     route={route}
-                    className="xs:hidden transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover shrink-0"
+                    className="xs:hidden max-w-0 group-hover:max-w-full data-[popover-open=true]:max-w-full data-[tooltip-open=true]:max-w-full overflow-hidden transition-all duration-300 opacity-0 group-hover:opacity-100 data-[popover-open=true]:opacity-100 data-[tooltip-open=true]:opacity-100 data-[popover-open=true]:delay-0 data-[tooltip-open=true]:delay-0 group-hover:delay-400 click-delay-on-hover shrink-0 pointer-events-none group-hover:pointer-events-auto data-[popover-open=true]:pointer-events-auto data-[tooltip-open=true]:pointer-events-auto"
                 />
             </div>
         }
diff --git a/components/Input/RoutePicker/Rows/index.tsx b/components/Input/RoutePicker/Rows/index.tsx
index edff1d14f..e1009a41a 100644
--- a/components/Input/RoutePicker/Rows/index.tsx
+++ b/components/Input/RoutePicker/Rows/index.tsx
@@ -58,7 +58,7 @@ export default function Row({
             const isSelected = selectedRoute === route.name && selectedToken === token.symbol;
 
             return (
-                <div className={clsx("cursor-pointer hover:bg-secondary-500 outline-none disabled:cursor-not-allowed rounded-xl")} onClick={() => onSelect(route, token)} >
+                <div className={clsx("group/row cursor-pointer hover:bg-secondary-500 has-[*[data-tooltip-open=true]]:bg-secondary-500 has-[*[data-tooltip-open=true]]:!cursor-pointer outline-none disabled:cursor-not-allowed rounded-xl")} onClick={() => onSelect(route, token)} >
                     <CurrencySelectItemDisplay
                         item={token}
                         selected={isSelected}
diff --git a/components/Input/RoutePicker/TokenTitleDetails.tsx b/components/Input/RoutePicker/TokenTitleDetails.tsx
index 539dcbe6f..fff22d40c 100644
--- a/components/Input/RoutePicker/TokenTitleDetails.tsx
+++ b/components/Input/RoutePicker/TokenTitleDetails.tsx
@@ -3,6 +3,9 @@ import { Info } from "lucide-react";
 import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
 import { formatUsd } from "@/components/utils/formatUsdAmount";
 import { TokenBalance } from "@/Models/Balance";
+import { useState } from "react";
+import clsx from "clsx";
+
 type TokenTitleWithBalanceProps = {
     item: NetworkRouteToken;
     route: NetworkRoute;
@@ -10,29 +13,36 @@ type TokenTitleWithBalanceProps = {
     usdAmount?: number;
 }
 
-export const TokenInfoIcon = ({ item, route, className, iconOnly = false }: { item: NetworkRouteToken, route: NetworkRoute, className?: string, iconOnly?: boolean }) => (
-    <div className={className}>
-        <ExtendedAddress
-            network={item.contract ? route : undefined}
-            isForCurrency
-            showDetails
-            address={item.contract || `${route.display_name} native coin`}
-            logo={item.logo}
-            title={item.symbol}
-            description={item.display_asset}
-            isNativeToken={!item.contract}
-        >
-            <div className={`flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text ${iconOnly ? '' : 'text-xs'}`}>
-                {!iconOnly && (
-                    <p className="max-w-[90px] truncate">
-                        <span>•</span> <span>{item.display_asset || item.symbol}</span>
-                    </p>
-                )}
-                <Info className={iconOnly ? "h-4 w-4" : "h-3 w-3"} />
-            </div>
-        </ExtendedAddress>
-    </div>
-);
+export const TokenInfoIcon = ({ item, route, className, iconOnly = false }: { item: NetworkRouteToken, route: NetworkRoute, className?: string, iconOnly?: boolean }) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+    return (
+        <div className={className} data-popover-open={isPopoverOpen} data-tooltip-open={isTooltipOpen}>
+            <ExtendedAddress
+                network={item.contract ? route : undefined}
+                isForCurrency
+                showDetails
+                address={item.contract || `${route.display_name} native coin`}
+                logo={item.logo}
+                title={item.symbol}
+                description={item.display_asset}
+                isNativeToken={!item.contract}
+                onPopoverOpenChange={setIsPopoverOpen}
+                onTooltipOpenChange={setIsTooltipOpen}
+            >
+                <div className={clsx('flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text data-[popover-open=true]:text-primary-text data-[tooltip-open=true]:text-primary-text', !iconOnly && 'text-xs')} data-popover-open={isPopoverOpen} data-tooltip-open={isTooltipOpen}>
+                    {!iconOnly && (
+                        <p className="max-w-[90px] truncate">
+                            <span>•</span> <span>{item.display_asset || item.symbol}</span>
+                        </p>
+                    )}
+                    <Info className={iconOnly ? "h-4 w-4" : "h-3 w-3"} />
+                </div>
+            </ExtendedAddress>
+        </div>
+    );
+};
 
 export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount }: TokenTitleWithBalanceProps) => {
     return (
@@ -45,7 +55,7 @@ export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount }:
                     item={item}
                     route={route}
                     iconOnly
-                    className="hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover"
+                    className="hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 data-[popover-open=true]:opacity-100 data-[tooltip-open=true]:opacity-100 data-[popover-open=true]:delay-0 data-[tooltip-open=true]:delay-0 group-hover:delay-400 click-delay-on-hover pointer-events-none group-hover:pointer-events-auto data-[popover-open=true]:pointer-events-auto data-[tooltip-open=true]:pointer-events-auto"
                 />
             </div>
             {(tokenbalance && Number(tokenbalance?.amount) > 0 && Number(usdAmount) > 0) && (