[explorer] popular packages tooltip (#13078)

## Description 

<img width="620" alt="image"
src="https://github.com/MystenLabs/sui/assets/128089541/065de05e-8c61-4ce1-99b2-5a8341108f1c">


## Test Plan 

locally

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/explorer/src/components/top-packages/TopPackagesCard.tsx

@@ -39,7 +39,10 @@ export function TopPackagesCard() {
 					onChange={(val) => setSelectedFilter(val)}
 				/>
 			</div>
-			<TabHeader title="Popular Packages">
+			<TabHeader
+				title="Popular Packages"
+				tooltip="Popular packages is recomputed on epoch changes."
+			>
 				<ErrorBoundary>
 					<TopPackagesTable data={filteredData} isLoading={isLoading} />
 				</ErrorBoundary>

apps/explorer/src/components/top-packages/TopPackagesTable.tsx

@@ -26,19 +26,19 @@ export function TopPackagesTable({ data, isLoading }: TopPackagesTableProps) {
 			})),
 			columns: [
 				{
-					header: 'Function',
-					accessorKey: 'function',
+					header: 'Package ID',
+					accessorKey: 'package',
 				},
 				{
 					header: 'Module',
 					accessorKey: 'module',
 				},
 				{
-					header: 'Package ID',
-					accessorKey: 'package',
+					header: 'Function',
+					accessorKey: 'function',
 				},
 				{
-					header: 'Txns',
+					header: 'Transactions',
 					accessorKey: 'count',
 				},
 			],

apps/explorer/src/ui/Tabs.tsx

@@ -13,13 +13,17 @@ import {
 	type ReactNode,
 } from 'react';
 
+import { Tooltip } from './Tooltip';
+import { ReactComponent as InfoSvg } from './icons/info_10x10.svg';
+import { ampli } from '~/utils/analytics/ampli';
+
 type TabSize = 'md' | 'lg' | 'sm';
 
 const TabSizeContext = createContext<TabSize | null | undefined>(null);
 
 const tabStyles = cva(
 	[
-		'border-b border-transparent -mb-px',
+		'flex items-center gap-1 border-b border-transparent -mb-px',
 		'font-semibold text-steel-dark disabled:text-steel-dark disabled:pointer-events-none hover:text-steel-darker data-[state=active]:border-gray-65',
 	],
 	{
@@ -57,7 +61,7 @@ const TabsList = forwardRef<
 		ref={ref}
 		className={clsx(
 			'flex items-center border-gray-45',
-			lessSpacing ? 'gap-2' : 'gap-6',
+			lessSpacing ? 'gap-3' : 'gap-6',
 			fullWidth && 'flex-1',
 			!disableBottomBorder && 'border-b',
 		)}
@@ -100,16 +104,30 @@ export function TabHeader({
 	title,
 	children,
 	noGap,
+	tooltip,
 }: {
 	size?: TabSize;
 	title: string;
 	children: ReactNode;
 	noGap?: boolean;
+	tooltip?: string;
 }) {
 	return (
 		<Tabs size={size} defaultValue="tab">
 			<TabsList>
-				<TabsTrigger value="tab">{title}</TabsTrigger>
+				<TabsTrigger value="tab">
+					{title}
+					{tooltip && (
+						<Tooltip
+							tip={tooltip}
+							onOpen={() => {
+								ampli.activatedTooltip({ tooltipLabel: title });
+							}}
+						>
+							<InfoSvg />
+						</Tooltip>
+					)}
+				</TabsTrigger>
 			</TabsList>
 			<TabsContent value="tab" noGap={noGap}>
 				{children}