Add tooltips to metrics in WebsiteMetricsBar and MetricCard components

[Fahleen1]

#3958
Added tooltips in metric content and cards for better accessibility

[vercel]

@Fahleen1 is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

added informative tooltips to the five main website metrics (visitors, visits, views, bounce rate, and visit duration) with an info icon next to each metric label

Key Changes

• added tooltip prop to MetricCard component interface
• implemented tooltip UI using TooltipTrigger, Focusable, Icon, and Tooltip from @umami/react-zen
• added info icon from lucide-react that appears next to metric labels when tooltip text is provided
• passed tooltip strings for all five metrics in WebsiteMetricsBar

Critical Issue

the tooltip strings are hardcoded in English ('Number of unique visitors to your website', 'Total number of sessions on your website', etc.) which breaks internationalization. the rest of the codebase uses formatMessage(labels.xxx) for all user-facing text to support multiple languages. these tooltips will only display in English for all users regardless of their language preference.

Confidence Score: 2/5

• this PR has a functional implementation but breaks i18n support for a significant portion of the user base
• the tooltip UI implementation is correct and follows existing patterns in the codebase, but the hardcoded English strings will not be translated for non-English users, creating an inconsistent experience. this is a logic issue that needs to be fixed before merging
• pay attention to WebsiteMetricsBar.tsx - all tooltip strings need to be internationalized

Important Files Changed

Filename	Overview
src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx	added tooltip strings to metrics, but hardcoded English text breaks i18n support for non-English users
src/components/metrics/MetricCard.tsx	added tooltip UI component with info icon using proper React component patterns

Sequence Diagram

sequenceDiagram
    participant User
    participant WebsiteMetricsBar
    participant MetricCard
    participant TooltipTrigger
    participant Tooltip
    
    User->>WebsiteMetricsBar: views metrics
    WebsiteMetricsBar->>WebsiteMetricsBar: fetches data via useWebsiteStatsQuery
    WebsiteMetricsBar->>WebsiteMetricsBar: creates metrics array with tooltip strings
    
    loop for each metric
        WebsiteMetricsBar->>MetricCard: renders with props (label, value, tooltip)
        MetricCard->>MetricCard: displays metric label and value
        
        alt tooltip provided
            MetricCard->>TooltipTrigger: wraps info icon
            MetricCard->>Tooltip: renders with tooltip text
            User->>TooltipTrigger: hovers over info icon
            TooltipTrigger->>Tooltip: shows tooltip with description
            Tooltip-->>User: displays hardcoded English text
        end
    end

Loading

[greptile-apps]

_{2 files reviewed, 5 comments}

_{Edit Code Review Agent Settings | Greptile}