refactor: replace tooltip in compare plans

Author: mickasmt

components/pricing/compare-plans.tsx

@@ -1,22 +1,20 @@
 import { PlansRow } from "@/types";
-import { CircleCheck, CircleHelp } from "lucide-react";
+import { CircleCheck, Info } from "lucide-react";
 
 import { comparePlans, plansColumns } from "@/config/subscriptions";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { HeaderSection } from "@/components/shared/header-section";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 export function ComparePlans() {
   const renderCell = (value: string | boolean | null) => {
     if (value === null) return "—";
     if (typeof value === "boolean")
-      return value ? <CircleCheck className="mx-auto size-6" /> : "—";
+      return value ? <CircleCheck className="mx-auto size-[22px]" /> : "—";
     return value;
   };
 
@@ -28,59 +26,57 @@ export function ComparePlans() {
         subtitle="Find the perfect plan tailored for your business needs!"
       />
 
-      <TooltipProvider delayDuration={200} skipDelayDuration={0}>
-        <div className="my-10 overflow-x-scroll max-lg:mx-[-0.8rem] md:overflow-x-visible">
-          <table className="w-full table-fixed">
-            <thead>
-              <tr className="divide-x divide-border border">
-                <th className="sticky left-0 z-10 w-40 bg-accent p-5 md:w-1/4 lg:top-14"></th>
+      <div className="my-10 overflow-x-scroll max-lg:mx-[-0.8rem] md:overflow-x-visible">
+        <table className="w-full table-fixed">
+          <thead>
+            <tr className="divide-x divide-border border">
+              <th className="sticky left-0 z-20 w-40 bg-accent p-5 md:w-1/4 lg:top-14"></th>
+              {plansColumns.map((col) => (
+                <th
+                  key={col}
+                  className="sticky z-10 w-40 bg-accent p-5 font-heading text-xl capitalize tracking-wide md:w-auto lg:top-14 lg:text-2xl"
+                >
+                  {col}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-x divide-border border">
+            {comparePlans.map((row: PlansRow, index: number) => (
+              <tr key={index} className="divide-x divide-border border">
+                <td
+                  data-tip={row.tooltip ? row.tooltip : ""}
+                  className="sticky left-0 bg-accent md:bg-transparent"
+                >
+                  <div className="flex items-center justify-between space-x-2 p-4">
+                    <span className="text-[15px] font-medium lg:text-base">
+                      {row.feature}
+                    </span>
+                    {row.tooltip && (
+                      <Popover>
+                        <PopoverTrigger className="rounded p-1 hover:bg-muted">
+                          <Info className="size-[18px] text-muted-foreground" />
+                        </PopoverTrigger>
+                        <PopoverContent className="max-w-80 p-3 text-sm">
+                          {row.tooltip}
+                        </PopoverContent>
+                      </Popover>
+                    )}
+                  </div>
+                </td>
                 {plansColumns.map((col) => (
-                  <th
+                  <td
                     key={col}
-                    className="sticky z-10 w-40 bg-accent p-5 font-heading text-xl capitalize tracking-wide md:w-auto lg:top-14 lg:text-2xl"
+                    className="p-4 text-center text-[15px] text-muted-foreground lg:text-base"
                   >
-                    {col}
-                  </th>
+                    {renderCell(row[col])}
+                  </td>
                 ))}
               </tr>
-            </thead>
-            <tbody className="divide-x divide-border border">
-              {comparePlans.map((row: PlansRow, index: number) => (
-                <tr key={index} className="divide-x divide-border border">
-                  <td
-                    data-tip={row.tooltip ? row.tooltip : ""}
-                    className="sticky left-0 bg-accent md:bg-transparent"
-                  >
-                    <div className="flex items-center justify-between space-x-2 p-4 font-medium">
-                      <span>{row.feature}</span>
-                      {row.tooltip && (
-                        <Tooltip>
-                          <TooltipTrigger>
-                            <CircleHelp className="size-[18px] text-muted-foreground" />
-                          </TooltipTrigger>
-                          <TooltipPortal>
-                            <TooltipContent className="max-w-80">
-                              <p>{row.tooltip}</p>
-                            </TooltipContent>
-                          </TooltipPortal>
-                        </Tooltip>
-                      )}
-                    </div>
-                  </td>
-                  {plansColumns.map((col) => (
-                    <td
-                      key={col}
-                      className="p-4 text-center text-muted-foreground"
-                    >
-                      {renderCell(row[col])}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </TooltipProvider>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </MaxWidthWrapper>
   );
 }

config/subscriptions.ts

@@ -79,7 +79,7 @@ export const plansColumns = [
 
 export const comparePlans: PlansRow[] = [
   {
-    feature: "Access to Basic Analytics",
+    feature: "Access to Analytics",
     starter: true,
     pro: true,
     business: true,
@@ -100,7 +100,6 @@ export const comparePlans: PlansRow[] = [
     pro: "Email",
     business: "Email & Chat",
     enterprise: "24/7 Support",
-    tooltip: "Higher plans provide more extensive support options.",
   },
   {
     feature: "Advanced Reporting",
@@ -125,7 +124,6 @@ export const comparePlans: PlansRow[] = [
     pro: "Standard",
     business: "Enhanced",
     enterprise: "Full",
-    tooltip: "API access varies by plan level.",
   },
   {
     feature: "Monthly Webinars",