From 8df1e6c5b1569973c0f1cfecbe0fa73ee49bdc47 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Sun, 24 May 2026 18:07:49 +0100
Subject: [PATCH] =?UTF-8?q?fix(landing):=20credit=20tooltip=20=E2=80=94=20?=
 =?UTF-8?q?Tooltip=20=E2=86=92=20Popover=20for=20click-triggered=20behavio?=
 =?UTF-8?q?ur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/landing/Pricing.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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>
   );
 }