Add tooltips to metrics in WebsiteMetricsBar and MetricCard components

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -25,18 +25,21 @@ export function WebsiteMetricsBar({
           label: formatMessage(labels.visitors),
           change: visitors - comparison.visitors,
           formatValue: formatLongNumber,
+          tooltip: 'Number of unique visitors to your website',
         },
         {
           value: visits,
           label: formatMessage(labels.visits),
           change: visits - comparison.visits,
           formatValue: formatLongNumber,
+          tooltip: 'Total number of sessions on your website',
         },
         {
           value: pageviews,
           label: formatMessage(labels.views),
           change: pageviews - comparison.pageviews,
           formatValue: formatLongNumber,
+          tooltip: 'Total number of pages viewed',
         },
         {
           label: formatMessage(labels.bounceRate),
@@ -47,6 +50,7 @@ export function WebsiteMetricsBar({
             (Math.min(comparison.visits, comparison.bounces) / comparison.visits) * 100,
           formatValue: n => `${Math.round(+n)}%`,
           reverseColors: true,
+          tooltip: 'Percentage of visits that leave after viewing only one page',
         },
         {
           label: formatMessage(labels.visitDuration),
@@ -55,6 +59,7 @@ export function WebsiteMetricsBar({
           change: totaltime / visits - comparison.totaltime / comparison.visits,
           formatValue: n =>
             `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
+          tooltip: 'Average time spent on your website per visit',
         },
       ]
     : null;
@@ -68,7 +73,7 @@ export function WebsiteMetricsBar({
       minHeight="136px"
     >
       <MetricsBar>
-        {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }) => {
+        {metrics?.map(({ label, value, prev, change, formatValue, reverseColors, tooltip }) => {
           return (
             <MetricCard
               key={label}
@@ -79,6 +84,7 @@ export function WebsiteMetricsBar({
               formatValue={formatValue}
               reverseColors={reverseColors}
               showChange={!isAllTime}
+              tooltip={tooltip}
             />
           );
         })}

src/components/metrics/MetricCard.tsx

@@ -1,5 +1,6 @@
 import { useSpring } from '@react-spring/web';
-import { Column, Text } from '@umami/react-zen';
+import { Column, Focusable, Icon, Text, Tooltip, TooltipTrigger } from '@umami/react-zen';
+import { Info } from 'lucide-react';
 import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { formatNumber } from '@/lib/format';
@@ -13,6 +14,7 @@ export interface MetricCardProps {
   formatValue?: (n: any) => string;
   showLabel?: boolean;
   showChange?: boolean;
+  tooltip?: string;
 }
 
 export const MetricCard = ({
@@ -23,6 +25,7 @@ export const MetricCard = ({
   formatValue = formatNumber,
   showLabel = true,
   showChange = false,
+  tooltip,
 }: MetricCardProps) => {
   const diff = value - change;
   const pct = ((value - diff) / diff) * 100;
@@ -39,8 +42,22 @@ export const MetricCard = ({
       border
     >
       {showLabel && (
-        <Text weight="bold" wrap="nowrap">
+        <Text
+          weight="bold"
+          wrap="nowrap"
+          style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+        >
           {label}
+          {tooltip && (
+            <TooltipTrigger delay={0}>
+              <Focusable aria-label="More info">
+                <Icon size="xs" style={{ cursor: 'pointer' }}>
+                  <Info />
+                </Icon>
+              </Focusable>
+              <Tooltip>{tooltip}</Tooltip>
+            </TooltipTrigger>
+          )}
         </Text>
       )}
       <Text size="8" weight="bold" wrap="nowrap">