diff --git a/src/components/landing/Pricing.tsx b/src/components/landing/Pricing.tsx
index 4f860e88..223828c2 100644
--- a/src/components/landing/Pricing.tsx
+++ b/src/components/landing/Pricing.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
 import { CheckCircle2, Info, RefreshCw } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { fadeUp, staggerChildren, viewportOnce } from '@/lib/motion';
 import { billingApi } from '@/lib/api';
 import { useTranslation } from 'react-i18next';
@@ -41,21 +41,21 @@ function buildFeatures(pack: CreditPack, personaCost: number, runCost: number):
 function CreditTooltip({ personaCost, runCost }: { personaCost: number; runCost: number }) {
   const { t } = useTranslation();
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
+    <Popover>
+      <PopoverTrigger asChild>
         <button className="inline-flex items-center gap-1 text-xs text-primary underline underline-offset-2 hover:text-primary/80">
           <Info className="h-3 w-3" />
           {t('pricing.tooltip_trigger')}
         </button>
-      </TooltipTrigger>
-      <TooltipContent className="max-w-xs p-3">
+      </PopoverTrigger>
+      <PopoverContent className="max-w-xs p-3" side="top">
         <p className="text-xs leading-relaxed">
           <strong>{t('pricing.tooltip_persona')}</strong> = {personaCost} credits<br />
           <strong>{t('pricing.tooltip_run')}</strong> = {runCost} credits<br />
           <strong>{t('pricing.tooltip_credits_never_expire')}</strong> {t('pricing.tooltip_trial')}
         </p>
-      </TooltipContent>
-    </Tooltip>
+      </PopoverContent>
+    </Popover>
   );
 }