🎉 added tooltips to each button inside menu with explanation

Author: kunkoala

locales/de-global.json5

@@ -34,10 +34,15 @@
       total: 'Gesamt',
       'one-day': '1T-neu',
       'seven-days': '7T-neu',
+      'time-period-total-tooltip': 'Gesamtzahl der Fälle am ausgewählten Datum anzeigen',
+      'time-period-one-day-tooltip': 'Neue Fälle in den letzten 24 Stunden am ausgewählten Datum anzeigen',
+      'time-period-seven-days-tooltip': 'Neue Fälle in den letzten 7 Tagen am ausgewählten Datum anzeigen',
       'number-type': 'Zahlenanzeige',
       'number-type-tooltip': 'Fallzahl pro 100.000 Einwohner',
       relative: 'Relativ',
       absolute: 'Absolut',
+      'relative-tooltip': 'Fälle pro 100.000 Einwohner anzeigen',
+      'absolute-tooltip': 'Absolute Fallzahl anzeigen',
     },
     'selection-chip': {
       'per-100k': 'pro 100.000 Einwohner',

locales/en-global.json5

@@ -33,10 +33,15 @@
       total: 'Total',
       'one-day': '1D-new',
       'seven-days': '7D-new',
+      'time-period-total-tooltip': 'Show the total number of cases at the selected date',
+      'time-period-one-day-tooltip': 'Show new cases in the last 24 hours at the selected date',
+      'time-period-seven-days-tooltip': 'Show new cases in the last 7 days at the selected date',
       'number-type': 'Number Display',
       'number-type-tooltip': 'Number of cases per 100k population',
       relative: 'Relative',
       absolute: 'Absolute',
+      'relative-tooltip': 'Show cases per 100k population',
+      'absolute-tooltip': 'Show absolute number of cases',
     },
     'selection-chip': {
       'per-100k': 'per 100k Population',

src/components/IconBar.tsx

@@ -213,31 +213,45 @@ export default function IconBar(): JSX.Element {
               aria-label='Aggregation window'
               sx={{width: '100%', gap: 3}}
             >
-              <ToggleButton
-                value={AggregationWindow.Total}
-                selected={aggregationWindow === AggregationWindow.Total}
-                onClick={() => dispatch(setAggregationWindow(AggregationWindow.Total))}
-                sx={{width: '100%'}}
-              >
-                {t('icon-bar.display-settings.total')}
-              </ToggleButton>
+              <Tooltip title={t('icon-bar.display-settings.time-period-total-tooltip')} arrow placement='bottom-start'>
+                <ToggleButton
+                  value={AggregationWindow.Total}
+                  selected={aggregationWindow === AggregationWindow.Total}
+                  onClick={() => dispatch(setAggregationWindow(AggregationWindow.Total))}
+                  sx={{width: '100%'}}
+                >
+                  {t('icon-bar.display-settings.total')}
+                </ToggleButton>
+              </Tooltip>
               <Divider orientation='vertical' flexItem />
-              <ToggleButton
-                value={AggregationWindow.OneDay}
-                selected={aggregationWindow === AggregationWindow.OneDay}
-                onClick={() => dispatch(setAggregationWindow(AggregationWindow.OneDay))}
-                sx={{width: '100%'}}
+              <Tooltip
+                title={t('icon-bar.display-settings.time-period-one-day-tooltip')}
+                arrow
+                placement='bottom-start'
               >
-                {t('icon-bar.display-settings.one-day')}
-              </ToggleButton>
-              <ToggleButton
-                value={AggregationWindow.SevenDays}
-                selected={aggregationWindow === AggregationWindow.SevenDays}
-                onClick={() => dispatch(setAggregationWindow(AggregationWindow.SevenDays))}
-                sx={{width: '100%'}}
+                <ToggleButton
+                  value={AggregationWindow.OneDay}
+                  selected={aggregationWindow === AggregationWindow.OneDay}
+                  onClick={() => dispatch(setAggregationWindow(AggregationWindow.OneDay))}
+                  sx={{width: '100%'}}
+                >
+                  {t('icon-bar.display-settings.one-day')}
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip
+                title={t('icon-bar.display-settings.time-period-seven-days-tooltip')}
+                arrow
+                placement='bottom-start'
               >
-                {t('icon-bar.display-settings.seven-days')}
-              </ToggleButton>
+                <ToggleButton
+                  value={AggregationWindow.SevenDays}
+                  selected={aggregationWindow === AggregationWindow.SevenDays}
+                  onClick={() => dispatch(setAggregationWindow(AggregationWindow.SevenDays))}
+                  sx={{width: '100%'}}
+                >
+                  {t('icon-bar.display-settings.seven-days')}
+                </ToggleButton>
+              </Tooltip>
             </StyledToggleButtonGroup>
           </Box>
 
@@ -261,22 +275,26 @@ export default function IconBar(): JSX.Element {
               aria-label='Aggregation window'
               sx={{width: '100%', gap: 3}}
             >
-              <ToggleButton
-                value='relative-numbers'
-                selected={relativeNumbers}
-                onClick={() => dispatch(toggleRelativeNumbers())}
-                sx={{width: '100%'}}
-              >
-                {t('icon-bar.display-settings.relative')}
-              </ToggleButton>
-              <ToggleButton
-                value='absolute-numbers'
-                selected={!relativeNumbers}
-                onClick={() => dispatch(toggleRelativeNumbers())}
-                sx={{width: '100%'}}
-              >
-                {t('icon-bar.display-settings.absolute')}
-              </ToggleButton>
+              <Tooltip title={t('icon-bar.display-settings.relative-tooltip')} arrow placement='bottom-start'>
+                <ToggleButton
+                  value='relative-numbers'
+                  selected={relativeNumbers}
+                  onClick={() => dispatch(toggleRelativeNumbers())}
+                  sx={{width: '100%'}}
+                >
+                  {t('icon-bar.display-settings.relative')}
+                </ToggleButton>
+              </Tooltip>
+              <Tooltip title={t('icon-bar.display-settings.absolute-tooltip')} arrow placement='bottom-start'>
+                <ToggleButton
+                  value='absolute-numbers'
+                  selected={!relativeNumbers}
+                  onClick={() => dispatch(toggleRelativeNumbers())}
+                  sx={{width: '100%'}}
+                >
+                  {t('icon-bar.display-settings.absolute')}
+                </ToggleButton>
+              </Tooltip>
             </StyledToggleButtonGroup>
           </Box>
         </Box>