dubinc · steven-tey · Oct 17, 2025 · Aug 8, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/...partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-table.tsx b/...partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-table.tsx
@@ -14,6 +14,7 @@ import {
   LinkLogo,
   StatusBadge,
   Table,
+  TimestampTooltip,
   Tooltip,
   usePagination,
   useRouterStuff,
@@ -24,7 +25,6 @@ import {
   cn,
   currencyFormatter,
   fetcher,
-  formatDateTime,
   formatDateTimeSmart,
   getApexDomain,
   getPrettyUrl,
@@ -79,9 +79,13 @@ export function EarningsTablePartner({ limit }: { limit?: number }) {
         accessorKey: "timestamp",
         minSize: 140,
         cell: ({ row }) => (
-          <p title={formatDateTime(row.original.createdAt)}>
-            {formatDateTimeSmart(row.original.createdAt)}
-          </p>
+          <TimestampTooltip
+            timestamp={row.original.createdAt}
+            side="right"
+            rows={["local"]}
+          >
+            <span>{formatDateTimeSmart(row.original.createdAt)}</span>
+          </TimestampTooltip>
         ),
       },
       {

diff --git a/...p.dub.co/(dashboard)/[slug]/(ee)/program/bounties/[bountyId]/bounty-submissions-table.tsx b/...p.dub.co/(dashboard)/[slug]/(ee)/program/bounties/[bountyId]/bounty-submissions-table.tsx
@@ -16,6 +16,7 @@ import {
   ProgressCircle,
   StatusBadge,
   Table,
+  TimestampTooltip,
   usePagination,
   useRouterStuff,
   useTable,
@@ -185,12 +186,21 @@ export function BountySubmissionsTable() {
             {
               id: "createdAt",
               header: "Submitted",
-              accessorFn: (d: BountySubmissionProps) => {
-                if (!d.createdAt || d.status === "draft") {
+              cell: ({ row }) => {
+                if (!row.original.createdAt || row.original.status === "draft")
                   return "-";
-                }
 
-                return formatDate(d.createdAt, { month: "short" });
+                return (
+                  <TimestampTooltip
+                    timestamp={row.original.createdAt}
+                    side="left"
+                    delayDuration={150}
+                  >
+                    <span>
+                      {formatDate(row.original.createdAt, { month: "short" })}
+                    </span>
+                  </TimestampTooltip>
+                );
               },
             },
           ]

diff --git a/...dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-columns.tsx b/...dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-columns.tsx
@@ -1,6 +1,6 @@
 import { GroupColorCircle } from "@/ui/partners/groups/group-color-circle";
-import { Tooltip } from "@dub/ui";
-import { formatDateTime, OG_AVATAR_URL, timeAgo } from "@dub/utils";
+import { TimestampTooltip } from "@dub/ui";
+import { OG_AVATAR_URL, timeAgo } from "@dub/utils";
 import { CampaignEvent } from "./campaign-events";
 
 export const campaignEventsColumns = [
@@ -45,17 +45,18 @@ export const campaignEventsColumns = [
       const timestamp = getTimestamp(row.original);
 
       return (
-        <Tooltip
-          content={timestamp ? formatDateTime(timestamp) : "-"}
+        <TimestampTooltip
+          timestamp={timestamp}
           side="top"
+          rows={["local", "utc", "unix"]}
         >
           <div
             className="text-content-subtle flex h-8 shrink-0 items-center justify-end text-xs font-medium"
             onClick={(e) => e.preventDefault()}
           >
             {timeAgo(timestamp)}
           </div>
-        </Tooltip>
+        </TimestampTooltip>
       );
     },
   },

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/campaigns-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/campaigns-table.tsx
@@ -17,19 +17,14 @@ import {
   Popover,
   StatusBadge,
   Table,
+  TimestampTooltip,
   Tooltip,
   usePagination,
   useRouterStuff,
   useTable,
 } from "@dub/ui";
 import { Dots, Duplicate, LoadingCircle, Trash } from "@dub/ui/icons";
-import {
-  cn,
-  fetcher,
-  formatDateTime,
-  formatDateTimeSmart,
-  nFormatter,
-} from "@dub/utils";
+import { cn, fetcher, formatDateTimeSmart, nFormatter } from "@dub/utils";
 import { Row } from "@tanstack/react-table";
 import { Command } from "cmdk";
 import { Mail, Pause, Play } from "lucide-react";
@@ -121,9 +116,14 @@ export function CampaignsTable() {
         header: "Created",
         accessorFn: (d) => d.createdAt,
         cell: ({ row }) => (
-          <p title={formatDateTime(row.original.createdAt)}>
-            {formatDateTimeSmart(row.original.createdAt)}
-          </p>
+          <TimestampTooltip
+            timestamp={row.original.createdAt}
+            side="right"
+            rows={["local"]}
+            delayDuration={150}
+          >
+            <span>{formatDateTimeSmart(row.original.createdAt)}</span>
+          </TimestampTooltip>
         ),
       },
       {

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/commissions/commission-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/commissions/commission-table.tsx
@@ -18,6 +18,7 @@ import {
   Filter,
   StatusBadge,
   Table,
+  TimestampTooltip,
   Tooltip,
   usePagination,
   useRouterStuff,
@@ -28,7 +29,6 @@ import {
   cn,
   currencyFormatter,
   fetcher,
-  formatDateTime,
   formatDateTimeSmart,
   nFormatter,
 } from "@dub/utils";
@@ -90,9 +90,14 @@ const CommissionTableInner = memo(
           id: "createdAt",
           header: "Date",
           cell: ({ row }) => (
-            <p title={formatDateTime(row.original.createdAt)}>
-              {formatDateTimeSmart(row.original.createdAt)}
-            </p>
+            <TimestampTooltip
+              timestamp={row.original.createdAt}
+              side="right"
+              rows={["local", "utc", "unix"]}
+              delayDuration={150}
+            >
+              <p>{formatDateTimeSmart(row.original.createdAt)}</p>
+            </TimestampTooltip>
           ),
         },
         {

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx
@@ -28,6 +28,7 @@ import {
   Popover,
   StatusBadge,
   Table,
+  TimestampTooltip,
   useColumnVisibility,
   usePagination,
   useRouterStuff,
@@ -191,7 +192,18 @@ export function PartnersTable() {
         {
           id: "createdAt",
           header: "Enrolled",
-          accessorFn: (d) => formatDate(d.createdAt, { month: "short" }),
+          cell: ({ row }) => (
+            <TimestampTooltip
+              timestamp={row.original.createdAt}
+              side="right"
+              rows={["local"]}
+              delayDuration={150}
+            >
+              <span>
+                {formatDate(row.original.createdAt, { month: "short" })}
+              </span>
+            </TimestampTooltip>
+          ),
         },
         {
           id: "status",

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/utm/template-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/utm/template-card.tsx
@@ -9,6 +9,7 @@ import {
   Button,
   CardList,
   Popover,
+  TimestampTooltip,
   Tooltip,
   useKeyboardShortcut,
   UTM_PARAMETERS,
@@ -108,7 +109,14 @@ export function TemplateCard({
         </Tooltip>
 
         <div className="hidden text-sm text-neutral-500 sm:block">
-          {formatDate(template.updatedAt, { month: "short" })}
+          <TimestampTooltip
+            timestamp={template.updatedAt}
+            rows={["local"]}
+            side="left"
+            delayDuration={150}
+          >
+            <span>{formatDate(template.updatedAt, { month: "short" })}</span>
+          </TimestampTooltip>
         </div>
 
         <div className="flex items-center gap-5 sm:gap-8 md:gap-12">

diff --git a/apps/web/ui/analytics/events/events-table.tsx b/apps/web/ui/analytics/events/events-table.tsx
@@ -12,6 +12,7 @@ import {
   EditColumnsButton,
   LinkLogo,
   Table,
+  TimestampTooltip,
   Tooltip,
   useColumnVisibility,
   usePagination,
@@ -184,21 +185,15 @@ export default function EventsTable({
           enableHiding: false,
           size: 160,
           cell: ({ getValue }) => (
-            <Tooltip
-              content={getValue().toLocaleTimeString("en-US", {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-                second: "numeric",
-                hour12: true,
-              })}
+            <TimestampTooltip
+              timestamp={getValue()}
+              side="right"
+              rows={["local", "utc", "unix"]}
             >
-              <div className="w-full truncate">
+              <span className="select-none truncate">
                 {formatDateTimeSmart(getValue())}
-              </div>
-            </Tooltip>
+              </span>
+            </TimestampTooltip>
           ),
         },
         // Sale amount

diff --git a/apps/web/ui/customers/customer-activity-list.tsx b/apps/web/ui/customers/customer-activity-list.tsx
@@ -1,5 +1,5 @@
 import { CustomerActivityResponse } from "@/lib/types";
-import { DynamicTooltipWrapper, LinkLogo } from "@dub/ui";
+import { DynamicTooltipWrapper, LinkLogo, TimestampTooltip } from "@dub/ui";
 import { CursorRays, MoneyBill2, UserCheck } from "@dub/ui/icons";
 import { formatDateTimeSmart, getApexDomain, getPrettyUrl } from "@dub/utils";
 import Link from "next/link";
@@ -136,9 +136,15 @@ export function CustomerActivityList({
             </div>
             <div className="flex min-w-0 flex-col gap-x-4 gap-y-1 whitespace-nowrap text-sm text-neutral-800 lg:grow lg:flex-row lg:justify-between">
               <div className="truncate">{content(event)}</div>
-              <span className="shrink-0 truncate text-sm text-neutral-500">
-                {formatDateTimeSmart(event.timestamp)}
-              </span>
+              <TimestampTooltip
+                timestamp={event.timestamp}
+                side="right"
+                rows={["local", "utc", "unix"]}
+              >
+                <span className="shrink-0 truncate text-sm text-neutral-500">
+                  {formatDateTimeSmart(event.timestamp)}
+                </span>
+              </TimestampTooltip>
             </div>
           </li>
         );

diff --git a/apps/web/ui/customers/customer-details-column.tsx b/apps/web/ui/customers/customer-details-column.tsx
@@ -1,5 +1,5 @@
 import { CustomerActivityResponse, CustomerProps } from "@/lib/types";
-import { CopyButton, UTM_PARAMETERS } from "@dub/ui";
+import { CopyButton, TimestampTooltip, UTM_PARAMETERS } from "@dub/ui";
 import {
   capitalize,
   cn,
@@ -123,13 +123,19 @@ export function CustomerDetailsColumn({
       <div className="flex flex-col gap-2">
         <DetailHeading>Customer since</DetailHeading>
         {customer ? (
-          <span>
-            {new Date(customer.createdAt).toLocaleDateString("en-US", {
-              month: "short",
-              day: "numeric",
-              year: "numeric",
-            })}
-          </span>
+          <TimestampTooltip
+            timestamp={customer.createdAt}
+            rows={["local"]}
+            side="left"
+          >
+            <span>
+              {new Date(customer.createdAt).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </span>
+          </TimestampTooltip>
         ) : (
           <div className="h-5 w-12 animate-pulse rounded-md bg-neutral-100" />
         )}

diff --git a/apps/web/ui/customers/customer-sales-table.tsx b/apps/web/ui/customers/customer-sales-table.tsx
@@ -1,5 +1,5 @@
 import { CommissionResponse, SaleEvent } from "@/lib/types";
-import { StatusBadge } from "@dub/ui";
+import { StatusBadge, TimestampTooltip } from "@dub/ui";
 import { currencyFormatter, formatDateTimeSmart, nFormatter } from "@dub/utils";
 import {
   flexRender,
@@ -37,7 +37,15 @@ export function CustomerSalesTable({
           new Date("timestamp" in d ? d.timestamp : d.createdAt),
         enableHiding: false,
         minSize: 100,
-        cell: ({ getValue }) => <span>{formatDateTimeSmart(getValue())}</span>,
+        cell: ({ getValue }) => (
+          <TimestampTooltip
+            timestamp={getValue()}
+            side="right"
+            rows={["local", "utc", "unix"]}
+          >
+            <span>{formatDateTimeSmart(getValue())}</span>
+          </TimestampTooltip>
+        ),
       },
       ...(sales?.length && "eventName" in sales?.[0]
         ? [

diff --git a/apps/web/ui/customers/customer-table/customer-table.tsx b/apps/web/ui/customers/customer-table/customer-table.tsx
@@ -19,6 +19,7 @@ import {
   MenuItem,
   Popover,
   Table,
+  TimestampTooltip,
   useColumnVisibility,
   useCopyToClipboard,
   usePagination,
@@ -171,7 +172,18 @@ export function CustomerTable() {
         {
           id: "createdAt",
           header: "Created",
-          accessorFn: (d) => formatDate(d.createdAt, { month: "short" }),
+          cell: ({ row }) => (
+            <TimestampTooltip
+              timestamp={row.original.createdAt}
+              rows={["local"]}
+              side="left"
+              delayDuration={150}
+            >
+              <span>
+                {formatDate(row.original.createdAt, { month: "short" })}
+              </span>
+            </TimestampTooltip>
+          ),
         },
         {
           id: "link",

diff --git a/apps/web/ui/links/link-builder/link-creator-info.tsx b/apps/web/ui/links/link-builder/link-creator-info.tsx
@@ -1,7 +1,7 @@
 import { ExpandedLinkProps } from "@/lib/types";
 import { UserAvatar } from "@/ui/links/link-title-column";
-import { Tooltip } from "@dub/ui";
-import { formatDateTime, timeAgo } from "@dub/utils";
+import { TimestampTooltip } from "@dub/ui";
+import { timeAgo } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
@@ -28,9 +28,13 @@ export function LinkCreatorInfo({ link }: { link: ExpandedLinkProps }) {
       </Link>
       <span className="text-neutral-400">
         ·{" "}
-        <Tooltip content={formatDateTime(link.createdAt)} delayDuration={150}>
-          <span>{timeAgo(link.createdAt)}</span>
-        </Tooltip>
+        <TimestampTooltip
+          timestamp={link.createdAt}
+          rows={["local", "utc", "unix"]}
+          delayDuration={150}
+        >
+          <span className="select-none">{timeAgo(link.createdAt)}</span>
+        </TimestampTooltip>
       </span>
     </div>
   );