fix: gh-982 - add tooltips (#3417)

bdshadow · web-flow · commit 52d5933ff427 · 2026-02-20T14:29:13.000+01:00
Time to clean the backlog :) Taking the oldest issue :) 

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;

## Summary by CodeRabbit

* **New Features**
* Added hover tooltips to multiple UI buttons (language selection,
notifications, user profile menu, quick start guide, and prepared
language actions) with full localization support.

* **Documentation**
  * Added translation entries for button tooltip text.

&lt;sub&gt;✏️ Tip: You can customize this high-level summary in your review
settings.&lt;/sub&gt;

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/webapp/src/component/languages/PreparedLanguage.tsx b/webapp/src/component/languages/PreparedLanguage.tsx
@@ -1,9 +1,10 @@
-import { Box, IconButton, styled } from '@mui/material';
+import { Box, IconButton, styled, Tooltip } from '@mui/material';
 import { XClose, Edit02 } from '@untitled-ui/icons-react';
 
 import { components } from 'tg.service/apiSchema.generated';
 
 import { FlagImage } from '@tginternal/library/components/languages/FlagImage';
+import { useTranslate } from '@tolgee/react';
 
 const StyledContainer = styled('div')`
   background: ${({ theme }) => theme.palette.languageChips.background};
@@ -35,6 +36,7 @@ export const PreparedLanguage: React.FC<
     onEdit: () => void;
   }
 > = (props) => {
+  const { t } = useTranslate();
   return (
     <>
       <StyledContainer data-cy="languages-prepared-language-box">
@@ -43,21 +45,35 @@ export const PreparedLanguage: React.FC<
           {props.name} | {props.originalName} ({props.tag})
         </Box>
         <Box display="flex" alignItems="center">
-          <StyledIconButton
-            data-cy="languages-create-customize-button"
-            size="small"
-            className="editButton"
-            onClick={props.onEdit}
+          <Tooltip
+            title={t('create_project_edit_prepared_languages')}
+            placement="bottom-end"
+            classes={{ tooltip: 'tooltip' }}
+            disableInteractive
           >
-            <Edit02 />
-          </StyledIconButton>
-          <StyledIconButton
-            size="small"
-            onClick={props.onReset}
-            data-cy="languages-create-cancel-prepared-button"
+            <StyledIconButton
+              data-cy="languages-create-customize-button"
+              size="small"
+              className="editButton"
+              onClick={props.onEdit}
+            >
+              <Edit02 />
+            </StyledIconButton>
+          </Tooltip>
+          <Tooltip
+            title={t('create_project_remove_prepared_languages')}
+            placement="bottom-end"
+            classes={{ tooltip: 'tooltip' }}
+            disableInteractive
           >
-            <XClose />
-          </StyledIconButton>
+            <StyledIconButton
+              size="small"
+              onClick={props.onReset}
+              data-cy="languages-create-cancel-prepared-button"
+            >
+              <XClose />
+            </StyledIconButton>
+          </Tooltip>
         </Box>
       </StyledContainer>
     </>
diff --git a/webapp/src/component/layout/Notifications/NotificationsTopBarButton.tsx b/webapp/src/component/layout/Notifications/NotificationsTopBarButton.tsx
@@ -1,10 +1,11 @@
 import { default as React, useState } from 'react';
-import { Badge, IconButton, styled } from '@mui/material';
+import { Badge, IconButton, styled, Tooltip } from '@mui/material';
 import { useApiQuery } from 'tg.service/http/useQueryApi';
 import { Bell01 } from '@untitled-ui/icons-react';
 import { NotificationsPopup } from 'tg.component/layout/Notifications/NotificationsPopup';
 import { NotificationsChanged } from 'tg.websocket-client/WebsocketClient';
 import { PopoverProps } from '@mui/material/Popover';
+import { useTranslate } from '@tolgee/react';
 
 const StyledIconButton = styled(IconButton)`
   width: 40px;
@@ -16,6 +17,7 @@ const StyledIconButton = styled(IconButton)`
 `;
 
 export const NotificationsTopBarButton: React.FC = () => {
+  const { t } = useTranslate();
   const [anchorEl, setAnchorEl] = useState<PopoverProps['anchorEl']>(null);
   const [unseenCount, setUnseenCount] = useState<number>();
 
@@ -51,29 +53,37 @@ export const NotificationsTopBarButton: React.FC = () => {
 
   return (
     <>
-      <StyledIconButton
-        color="inherit"
-        aria-controls="notifications-button"
-        aria-haspopup="true"
-        data-cy="notifications-button"
-        onClick={handleOpen}
-        size="large"
+      <Tooltip
+        title={t('notifications-header')}
+        placement="bottom-end"
+        classes={{ tooltip: 'tooltip' }}
+        disableInteractive
       >
-        <Badge
-          badgeContent={
-            unseenNotificationsLoadable.data?.page?.totalElements || unseenCount
-          }
-          color="secondary"
-          slotProps={{
-            badge: {
-              //@ts-ignore
-              'data-cy': 'notifications-count',
-            },
-          }}
+        <StyledIconButton
+          color="inherit"
+          aria-controls="notifications-button"
+          aria-haspopup="true"
+          data-cy="notifications-button"
+          onClick={handleOpen}
+          size="large"
         >
-          <Bell01 />
-        </Badge>
-      </StyledIconButton>
+          <Badge
+            badgeContent={
+              unseenNotificationsLoadable.data?.page?.totalElements ||
+              unseenCount
+            }
+            color="secondary"
+            slotProps={{
+              badge: {
+                //@ts-ignore
+                'data-cy': 'notifications-count',
+              },
+            }}
+          >
+            <Bell01 />
+          </Badge>
+        </StyledIconButton>
+      </Tooltip>
       <NotificationsPopup
         onClose={handleClose}
         onNotificationsChanged={onNotificationsChanged}
diff --git a/webapp/src/component/layout/QuickStartGuide/QuickStartTopBarButton.tsx b/webapp/src/component/layout/QuickStartGuide/QuickStartTopBarButton.tsx
@@ -1,11 +1,12 @@
-import { Box, Button, styled } from '@mui/material';
+import { Box, Button, styled, Tooltip } from '@mui/material';
 import {
   useGlobalActions,
   useGlobalContext,
 } from 'tg.globalContext/GlobalContext';
 import { RocketFilled } from 'tg.component/CustomIcons';
 import { items } from './quickStartConfig';
 import { QuickStartProgress } from './QuickStartProgress';
+import { useTranslate } from '@tolgee/react';
 
 const StyledContainer = styled(Box)`
   position: relative;
@@ -17,6 +18,7 @@ const StyledButton = styled(Button)`
 `;
 
 export const QuickStartTopBarButton = () => {
+  const { t } = useTranslate();
   const guideEnabled = useGlobalContext((c) => c.quickStartGuide.enabled);
   const guideOpen = useGlobalContext((c) => c.quickStartGuide.open);
   const guideFloatingOpen = useGlobalContext(
@@ -41,12 +43,19 @@ export const QuickStartTopBarButton = () => {
     <>
       {guideEnabled && (
         <StyledContainer>
-          <StyledButton onClick={handleClick} color="inherit">
-            <Box display="flex" gap={1} alignItems="center">
-              <RocketFilled width={20} height={20} />
-              <QuickStartProgress percent={completedSteps / allSteps} />
-            </Box>
-          </StyledButton>
+          <Tooltip
+            title={t('guide_title')}
+            placement="bottom-end"
+            classes={{ tooltip: 'tooltip' }}
+            disableInteractive
+          >
+            <StyledButton onClick={handleClick} color="inherit">
+              <Box display="flex" gap={1} alignItems="center">
+                <RocketFilled width={20} height={20} />
+                <QuickStartProgress percent={completedSteps / allSteps} />
+              </Box>
+            </StyledButton>
+          </Tooltip>
         </StyledContainer>
       )}
     </>
diff --git a/webapp/src/component/layout/TopBar/LanguageMenu.tsx b/webapp/src/component/layout/TopBar/LanguageMenu.tsx
@@ -1,11 +1,11 @@
 import { default as React, FunctionComponent, useState } from 'react';
-import { Box, IconButton, styled } from '@mui/material';
+import { Box, IconButton, styled, Tooltip } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { CircledLanguageIcon } from '../../languages/CircledLanguageIcon';
 import { locales } from '@tginternal/library/constants/locales';
 import { useCurrentLanguage } from '@tginternal/library/hooks/useCurrentLanguage';
-import { useTolgee } from '@tolgee/react';
+import { useTolgee, useTranslate } from '@tolgee/react';
 
 const StyledMenu = styled(Menu)`
   .MuiPaper-root {
@@ -22,6 +22,7 @@ const StyledIconButton = styled(IconButton)`
 `;
 
 export const LanguageMenu: FunctionComponent<{ className?: string }> = () => {
+  const { t } = useTranslate();
   const tolgee = useTolgee();
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     // @ts-ignore
@@ -39,20 +40,27 @@ export const LanguageMenu: FunctionComponent<{ className?: string }> = () => {
   return (
     <>
       <div>
-        <StyledIconButton
-          color="inherit"
-          aria-controls="language-menu"
-          aria-haspopup="true"
-          data-cy="global-language-menu"
-          onClick={handleOpen}
-          size="large"
+        <Tooltip
+          title={t('language_menu_title')}
+          placement="bottom-end"
+          classes={{ tooltip: 'tooltip' }}
+          disableInteractive
         >
-          <CircledLanguageIcon
-            flag={language ? locales[language].flag : undefined}
-            size={24}
-            draggable="false"
-          />
-        </StyledIconButton>
+          <StyledIconButton
+            color="inherit"
+            aria-controls="language-menu"
+            aria-haspopup="true"
+            data-cy="global-language-menu"
+            onClick={handleOpen}
+            size="large"
+          >
+            <CircledLanguageIcon
+              flag={language ? locales[language].flag : undefined}
+              size={24}
+              draggable="false"
+            />
+          </StyledIconButton>
+        </Tooltip>
         <StyledMenu
           id="language-menu"
           keepMounted
diff --git a/webapp/src/component/security/UserMenu/UserMissingAvatarMenu.tsx b/webapp/src/component/security/UserMenu/UserMissingAvatarMenu.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { IconButton, Popover, styled } from '@mui/material';
+import { IconButton, Popover, styled, Tooltip } from '@mui/material';
 
 import { UserAvatar } from 'tg.component/common/avatar/UserAvatar';
 
 import { ThemeItem } from './ThemeItem';
 import { LanguageItem } from './LanguageItem';
 import { UserMenuItems } from './UserMenuItems';
+import { useTranslate } from '@tolgee/react';
 
 const StyledIconButton = styled(IconButton)`
   width: 40px;
@@ -28,6 +29,7 @@ const StyledDivider = styled('div')`
 `;
 
 export const UserMissingAvatarMenu: React.FC = () => {
+  const { t } = useTranslate();
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -41,16 +43,23 @@ export const UserMissingAvatarMenu: React.FC = () => {
 
   return (
     <div>
-      <StyledIconButton
-        color="inherit"
-        data-cy="global-user-menu-button"
-        aria-controls="user-menu"
-        aria-haspopup="true"
-        onClick={handleOpen}
-        size="large"
+      <Tooltip
+        title={t('user_profile_title')}
+        placement="bottom-end"
+        classes={{ tooltip: 'tooltip' }}
+        disableInteractive
       >
-        <UserAvatar />
-      </StyledIconButton>
+        <StyledIconButton
+          color="inherit"
+          data-cy="global-user-menu-button"
+          aria-controls="user-menu"
+          aria-haspopup="true"
+          onClick={handleOpen}
+          size="large"
+        >
+          <UserAvatar />
+        </StyledIconButton>
+      </Tooltip>
       <StyledPopover
         id="user-menu"
         keepMounted
diff --git a/webapp/src/component/security/UserMenu/UserPresentAvatarMenu.tsx b/webapp/src/component/security/UserMenu/UserPresentAvatarMenu.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IconButton, MenuItem, Popover, styled } from '@mui/material';
+import { IconButton, MenuItem, Popover, styled, Tooltip } from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 
@@ -91,16 +91,23 @@ export const UserPresentAvatarMenu: React.FC = () => {
 
   return (
     <div>
-      <StyledIconButton
-        color="inherit"
-        data-cy="global-user-menu-button"
-        aria-controls="user-menu"
-        aria-haspopup="true"
-        onClick={handleOpen}
-        size="large"
+      <Tooltip
+        title={t('user_profile_title')}
+        placement="bottom-end"
+        classes={{ tooltip: 'tooltip' }}
+        disableInteractive
       >
-        <UserAvatar />
-      </StyledIconButton>
+        <StyledIconButton
+          color="inherit"
+          data-cy="global-user-menu-button"
+          aria-controls="user-menu"
+          aria-haspopup="true"
+          onClick={handleOpen}
+          size="large"
+        >
+          <UserAvatar />
+        </StyledIconButton>
+      </Tooltip>
       <StyledPopover
         id="user-menu"
         keepMounted
diff --git a/webapp/src/component/security/UserMenu/UserUnverifiedEmailMenu.tsx b/webapp/src/component/security/UserMenu/UserUnverifiedEmailMenu.tsx
diff --git a/webapp/src/i18n/en.json b/webapp/src/i18n/en.json
