Merge pull request #85 from bitsnark/feat/tooltip

info tooltip top

Author: njaume

src/components/history-table/transactions-table.tsx

@@ -80,7 +80,7 @@ export default function TransactionsTable() {
 
     // Render desktop table view
     return (
-      <div className="bg-card p-6 rounded-xl overflow-hidden w-full">
+      <div className="bg-card p-6 rounded-xl overflow-visible w-full">
         <Table
           style={{
             borderCollapse: 'separate',

src/components/tabs-switcher/fee-card.tsx

@@ -26,7 +26,7 @@ export function FeeCard({ toCurrency, isAnimating, amount, gasFee }: FeeCardProp
             You'll receive
             <InfoTooltip
               message={`You'll receive the ${toCurrency === 'btc' ? 'BTC' : 'xBTC'} you sent, minus the network fee.`}
-              position="bottom"
+              position="top"
               align="center"
             />
           </div>
@@ -39,7 +39,7 @@ export function FeeCard({ toCurrency, isAnimating, amount, gasFee }: FeeCardProp
             Network fee
             <InfoTooltip
               message="The cost of gas to fund your transaction, paid in ETH. This fee may vary, and is estimated at the moment of your transaction."
-              position="bottom"
+              position="top"
               align="center"
             />
           </div>

src/components/tabs-switcher/transfer-form.tsx

@@ -120,7 +120,7 @@ export function TransferForm({
           Ethereum sending address
           <InfoTooltip
             message="The sending amount is calculated in BTC. Ethereum token X, Y, Z can be used for transfer"
-            position="bottom"
+            position="top"
           />
         </Label>
         <Input
@@ -146,7 +146,7 @@ export function TransferForm({
             Bitcoin receiving address
             <InfoTooltip
               message="Enter the Bitcoin address where you want to receive your BTC."
-              position="bottom"
+              position="top"
             />
           </Label>
           <Input

src/components/ui/tooltip.tsx

@@ -42,7 +42,7 @@ export function Tooltip({
   }, []);
 
   return (
-    <div className="relative inline-block">
+    <div className="relative inline-block z-100000">
       <div
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
@@ -57,7 +57,7 @@ export function Tooltip({
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
           className={cn(
-            'absolute z-50 min-w-[216px] px-[12px] py-[8px] rounded-lg bg-[#484D59]',
+            'absolute z-100000 min-w-[216px] px-[12px] py-[8px] rounded-lg bg-[#484D59]',
             position === 'top' && 'bottom-full mb-3 left-1/2 transform -translate-x-1/2',
             position === 'bottom' && 'top-full mt-3 left-1/2 transform -translate-x-1/2',
             position === 'left' && 'right-full mr-3 top-1/2 transform -translate-y-1/2',