Make tooltips mobile friendly.

lib/assets/css/global.css

@@ -61,6 +61,21 @@ body {
   flex-grow: 1;
 }
 
+.chakra-ui-light {
+  --tooltip-text-decoration-color: var(--chakra-colors-gray-300);
+}
+
+.chakra-ui-dark {
+  --tooltip-text-decoration-color: var(--chakra-colors-gray-500);
+}
+
+.tooltip-dashed-underline {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--tooltip-text-decoration-color);
+}
+
 .fade-in-opacity {
   --start-opacity: 1;
 }

lib/modules/pool/PoolDetail/PoolHeader/PoolMetaBadges.tsx

@@ -1,6 +1,14 @@
 'use client'
 
-import { Badge, Flex, HStack, Text, Tooltip } from '@chakra-ui/react'
+import {
+  Badge,
+  Flex,
+  HStack,
+  Text,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@chakra-ui/react'
 import { usePool } from '../../PoolProvider'
 import Image from 'next/image'
 import { fNum } from '@/lib/shared/utils/numbers'
@@ -33,26 +41,34 @@ export default function PoolMetaBadges() {
       </Badge>
       <PoolListTokenPills pool={pool} py="2" px="sm" />
       {!shouldHideSwapFee(pool.type) && (
-        <Tooltip label="Swap fee">
-          <Badge
-            fontWeight="normal"
-            py="xs"
-            px="sm"
-            background="background.level2"
-            border="1px solid"
-            borderColor="border.base"
-            shadow="sm"
-            rounded="full"
-            display="flex"
-            alignItems="center"
-            h={{ base: '28px' }}
-          >
-            <HStack color="font.primary">
-              <Repeat size={12} />
-              <Text fontSize="sm">{fNum('feePercent', pool.dynamicData.swapFee)}</Text>
-            </HStack>
-          </Badge>
-        </Tooltip>
+        <Popover trigger="hover">
+          <PopoverTrigger>
+            <Badge
+              fontWeight="normal"
+              py="xs"
+              px="sm"
+              background="background.level2"
+              border="1px solid"
+              borderColor="border.base"
+              shadow="sm"
+              rounded="full"
+              display="flex"
+              alignItems="center"
+              h={{ base: '28px' }}
+            >
+              <HStack color="font.primary">
+                <Repeat size={12} />
+                <Text fontSize="xs">{fNum('feePercent', pool.dynamicData.swapFee)}</Text>
+              </HStack>
+            </Badge>
+          </PopoverTrigger>
+          <PopoverContent p="sm" w="auto" maxW="300px">
+            <Text fontSize="sm" variant="secondary">
+              The swap fee rate earned by Liquidity Providers anytime a swap is routed through this
+              pool. These fees automatically accumulate into each LP&rsquo;s position.
+            </Text>
+          </PopoverContent>
+        </Popover>
       )}
     </Flex>
   )

lib/modules/pool/PoolDetail/PoolInfo/PoolContracts.tsx

@@ -14,6 +14,9 @@ import {
   Divider,
   Text,
   Tooltip,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
   VStack,
 } from '@chakra-ui/react'
 import { usePool } from '../../PoolProvider'
@@ -136,15 +139,22 @@ export function PoolContracts({ ...props }: CardProps) {
         {rateProviders.length > 0 && (
           <Grid templateColumns={{ base: '1fr 2fr', md: '1fr 3fr' }} gap="sm" w="full">
             <GridItem>
-              <Tooltip
-                // eslint-disable-next-line max-len
-                label="Rate Providers are contracts that provide an exchange rate between two assets. This can come from any on-chain source, including oracles or from other calculations. This introduces risks around the rate provider being able to supply accurate and timely exchange rates."
-                fontSize="sm"
-              >
-                <Text minW="120px" variant="secondary">
-                  Rate provider(s):
-                </Text>
-              </Tooltip>
+              <Popover trigger="hover">
+                <PopoverTrigger>
+                  <Text minW="120px" variant="secondary" className="tooltip-dashed-underline">
+                    {rateProviders.length === 1 ? 'Rate provider:' : 'Rate providers:'}
+                  </Text>
+                </PopoverTrigger>
+
+                <PopoverContent p="sm" w="auto" maxW="300px">
+                  <Text fontSize="sm" variant="secondary">
+                    Rate Providers are contracts that provide an exchange rate between two assets.
+                    This can come from any on-chain source, including oracles or from other
+                    calculations. This introduces risks around the rate provider being able to
+                    supply accurate and timely exchange rates.
+                  </Text>
+                </PopoverContent>
+              </Popover>
             </GridItem>
             <GridItem>
               <VStack alignItems="flex-start">

lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx

@@ -1,6 +1,16 @@
 import { NumberText } from '@/lib/shared/components/typography/NumberText'
 import { fNum, bn } from '@/lib/shared/utils/numbers'
-import { HStack, VStack, Text, Tooltip, Icon, Box, Skeleton } from '@chakra-ui/react'
+import {
+  HStack,
+  VStack,
+  Text,
+  Icon,
+  Box,
+  Skeleton,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@chakra-ui/react'
 import { usePriceImpact } from '@/lib/modules/price-impact/PriceImpactProvider'
 import { useCurrency } from '@/lib/shared/hooks/useCurrency'
 import { usePool } from '../PoolProvider'
@@ -55,21 +65,31 @@ export function PoolActionsPriceImpactDetails({
               {toCurrency(priceImpactUsd, { abbreviated: false })} ({priceImpactLabel})
             </NumberText>
           )}
-          <Tooltip
-            label="In general, adding or removing liquidity in proportional amounts to the token weights
-                of the pool incur low price impact. Adding custom token amounts (non-proportionally)
-                causes the internal prices of the pool to change, as if you were swapping tokens, which 
-                incurs a higher price impact."
-            fontSize="sm"
-          >
-            {priceImpactLevel === 'low' ? (
-              <InfoIcon />
-            ) : (
-              <Box>
-                <PriceImpactIcon priceImpactLevel={priceImpactLevel} />
-              </Box>
-            )}
-          </Tooltip>
+          <Popover trigger="hover">
+            <PopoverTrigger>
+              {priceImpactLevel === 'low' ? (
+                <Box
+                  opacity="0.5"
+                  transition="opacity 0.2s var(--ease-out-cubic)"
+                  _hover={{ opacity: 1 }}
+                >
+                  <InfoIcon />
+                </Box>
+              ) : (
+                <Box>
+                  <PriceImpactIcon priceImpactLevel={priceImpactLevel} />
+                </Box>
+              )}
+            </PopoverTrigger>
+            <PopoverContent p="sm" w="auto" maxW="300px">
+              <Text fontSize="sm" variant="secondary">
+                In general, adding or removing liquidity in proportional amounts to the token
+                weights of the pool incur low price impact. Adding custom token amounts
+                (non-proportionally) causes the internal prices of the pool to change, as if you
+                were swapping tokens, which incurs a higher price impact.
+              </Text>
+            </PopoverContent>
+          </Popover>
         </HStack>
       </HStack>
       <HStack justify="space-between" w="full">
@@ -82,14 +102,24 @@ export function PoolActionsPriceImpactDetails({
               {toCurrency(maxSlippageUsd, { abbreviated: false })} ({fNum('slippage', slippage)})
             </NumberText>
           )}
-          <Tooltip
-            label="Slippage occurs when market conditions change between the time your order is
-                submitted and the time it gets executed on-chain. Slippage tolerance is the
-                maximum change in price you are willing to accept."
-            fontSize="sm"
-          >
-            <InfoIcon />
-          </Tooltip>
+          <Popover trigger="hover">
+            <PopoverTrigger>
+              <Box
+                opacity="0.5"
+                transition="opacity 0.2s var(--ease-out-cubic)"
+                _hover={{ opacity: 1 }}
+              >
+                <InfoIcon />
+              </Box>
+            </PopoverTrigger>
+            <PopoverContent p="sm" w="auto" maxW="300px">
+              <Text fontSize="sm" variant="secondary">
+                Slippage occurs when market conditions change between the time your order is
+                submitted and the time it gets executed on-chain. Slippage tolerance is the maximum
+                change in price you are willing to accept.
+              </Text>
+            </PopoverContent>
+          </Popover>
         </HStack>
       </HStack>
       <HStack justify="space-between" w="full">
@@ -106,12 +136,22 @@ export function PoolActionsPriceImpactDetails({
               </>
             )}
           </HStack>
-          <Tooltip
-            label="The percentage of the pool that you will own after this transaction."
-            fontSize="sm"
-          >
-            <InfoIcon />
-          </Tooltip>
+          <Popover trigger="hover">
+            <PopoverTrigger>
+              <Box
+                opacity="0.5"
+                transition="opacity 0.2s var(--ease-out-cubic)"
+                _hover={{ opacity: 1 }}
+              >
+                <InfoIcon />
+              </Box>
+            </PopoverTrigger>
+            <PopoverContent p="sm" w="auto" maxW="300px">
+              <Text fontSize="sm" variant="secondary">
+                The percentage of the pool that you will own after this transaction.
+              </Text>
+            </PopoverContent>
+          </Popover>
         </HStack>
       </HStack>
     </VStack>

lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx

@@ -16,6 +16,9 @@ import {
   Skeleton,
   Text,
   Tooltip,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
   VStack,
 } from '@chakra-ui/react'
 import { useEffect, useRef, useState } from 'react'
@@ -140,9 +143,25 @@ export function RemoveLiquidityForm() {
                   size="xxs"
                   groupId="remove"
                 />
-                <Tooltip label="Remove liquidity type" fontSize="sm">
-                  <InfoIcon />
-                </Tooltip>
+                <Popover trigger="hover">
+                  <PopoverTrigger>
+                    <Box
+                      opacity="0.5"
+                      transition="opacity 0.2s var(--ease-out-cubic)"
+                      _hover={{ opacity: 1 }}
+                    >
+                      <InfoIcon />
+                    </Box>
+                  </PopoverTrigger>
+                  <PopoverContent p="sm" w="auto" maxW="300px">
+                    <Text fontSize="sm" variant="secondary">
+                      Proportional liquidity removal does not impact the prices of tokens on exit,
+                      which maximizes your returns. Alternatively, Single-token removal may be more
+                      convenient in certain situations but may reduce the value returned to you due
+                      to price impact.
+                    </Text>
+                  </PopoverContent>
+                </Popover>
               </HStack>
             )}
             <VStack w="full" spacing="md" align="start">