Refactor tooltip component

The AI will refactor the tooltip component to ensure consistent styling and prevent further issues with text color and structure. This involves a strategic change in approach to address the persistent inconsistencies.

Author: lovable-dev[bot]

src/components/CampaignInfoCards.tsx

@@ -6,7 +6,7 @@ import { TrendingUp, Calendar, ExternalLink, Copy } from 'lucide-react';
 import { Campaign } from '@/types';
 import { useToast } from '@/hooks/use-toast';
 import { IntegrationStatusIndicator } from './IntegrationStatusIndicator';
-import { InfoTooltip } from './InfoTooltip';
+import { CustomInfoTooltip } from './CustomInfoTooltip';
 
 interface CampaignInfoCardsProps {
   campaign: Campaign;
@@ -83,7 +83,7 @@ export const CampaignInfoCards = ({ campaign }: CampaignInfoCardsProps) => {
         <div className="flex items-center gap-2 text-blue-600 mb-2">
           <ExternalLink className="h-4 w-4" />
           <span className="text-sm font-medium">Dashboard public</span>
-          <InfoTooltip text="Partagez ce lien avec vos affiliés pour qu'ils puissent consulter leurs statistiques et accéder à leurs liens de tracking." />
+          <CustomInfoTooltip text="Partagez ce lien avec vos affiliés pour qu'ils puissent consulter leurs statistiques et accéder à leurs liens de tracking." />
         </div>
         <div className="space-y-2">
           <div className="flex items-center gap-2">

src/components/CustomInfoTooltip.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { HelpCircle } from 'lucide-react';
+
+interface CustomInfoTooltipProps {
+  text: string;
+}
+
+export const CustomInfoTooltip = ({ text }: CustomInfoTooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <HelpCircle 
+        className="h-3 w-3 text-blue-500/70 cursor-help" 
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+      />
+      {isVisible && (
+        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-md shadow-lg z-50 whitespace-nowrap max-w-xs">
+          {text}
+          <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/IntegrationStatusIndicator.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { CheckCircle, AlertCircle, XCircle, RefreshCw } from 'lucide-react';
 import { Campaign } from '@/types';
-import { InfoTooltip } from './InfoTooltip';
+import { CustomInfoTooltip } from './CustomInfoTooltip';
 
 interface IntegrationStatusIndicatorProps {
   campaign: Campaign;
@@ -109,8 +109,8 @@ export const IntegrationStatusIndicator = ({ campaign }: IntegrationStatusIndica
         {config.icon}
         <span className="text-xs font-medium">{config.label}</span>
       </Badge>
-      <InfoTooltip text={config.description} />
-      <InfoTooltip text="L'indicateur 'Code' vous montre si votre script de tracking RefSpring est correctement installé sur votre site e-commerce et s'il fonctionne." />
+      <CustomInfoTooltip text={config.description} />
+      <CustomInfoTooltip text="L'indicateur 'Code' vous montre si votre script de tracking RefSpring est correctement installé sur votre site e-commerce et s'il fonctionne." />
     </div>
   );
 };