Update line selection buttons add tooltips

src/App.tsx

@@ -19,7 +19,7 @@ import Settings from './components/settings';
 import LanguageSelector from './components/language-selector';
 import DisclaimerModal from './components/disclaimer-modal';
 import { Button } from './components/ui/button';
-import { TooltipProvider } from './components/ui/tooltip';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './components/ui/tooltip';
 import { IconButtonWithTooltip } from './components/ui/icon-button-with-tooltip';
 import { PROJECT_REPOSITORY_URL, APP_VERSION } from './constants/defaults';
 
@@ -131,24 +131,45 @@ const MedPlanAssistant = () => {
                style={uiSettings.stickyChart ? { borderColor: 'hsl(var(--primary))' } : {}}>
             <div className="flex flex-wrap items-center gap-3 justify-between mb-4">
               <div className="flex flex-wrap justify-center gap-2">
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
                       onClick={() => updateUiSetting('chartView', 'damph')}
                       variant={chartView === 'damph' ? 'default' : 'secondary'}
                     >
                       {t(useCompactButtons ? 'dAmphetamineShort' : 'dAmphetamine')}
                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-xs max-w-xs">{t('chartViewDamphTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
                       onClick={() => updateUiSetting('chartView', 'ldx')}
                       variant={chartView === 'ldx' ? 'default' : 'secondary'}
                     >
                       {t(useCompactButtons ? 'lisdexamfetamineShort' : 'lisdexamfetamine')}
                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-xs max-w-xs">{t('chartViewLdxTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
                       onClick={() => updateUiSetting('chartView', 'both')}
                       variant={chartView === 'both' ? 'default' : 'secondary'}
                     >
                       {t('both')}
                     </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-xs max-w-xs">{t('chartViewBothTooltip')}</p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
               <IconButtonWithTooltip
                 onClick={() => updateUiSetting('stickyChart', !uiSettings.stickyChart)}

src/locales/de.ts

@@ -61,6 +61,9 @@ export const de = {
   pinChart: "Diagramm oben fixieren",
   unpinChart: "Diagramm freigeben",
   stickyChartTooltip: "Diagramm beim Scrollen durch die Einstellungen sichtbar halten, um Änderungen in Echtzeit zu sehen. Standard: aus.",
+  chartViewDamphTooltip: "Nur den aktiven Metaboliten (d-Amphetamin) im Konzentrationsverlauf anzeigen",
+  chartViewLdxTooltip: "Nur das Prodrug (Lisdexamfetamin) im Konzentrationsverlauf anzeigen",
+  chartViewBothTooltip: "Sowohl d-Amphetamin als auch Lisdexamfetamin gemeinsam anzeigen",
   tooltipHour: "Stunde",
 
   // Settings

src/locales/en.ts

@@ -61,6 +61,9 @@ export const en = {
   pinChart: "Pin chart to top",
   unpinChart: "Unpin chart",
   stickyChartTooltip: "Keep chart visible while scrolling through settings for real-time feedback. Default: off.",
+  chartViewDamphTooltip: "Show only the active metabolite (d-Amphetamine) concentration profile",
+  chartViewLdxTooltip: "Show only the prodrug (Lisdexamfetamine) concentration profile",
+  chartViewBothTooltip: "Show both d-Amphetamine and Lisdexamfetamine profiles together",
 
   // Settings
   diagramSettings: "Diagram Settings",