diff --git a/src/components/appBar/AppBar.tsx b/src/components/appBar/AppBar.tsx
index d9435244..728de039 100644
--- a/src/components/appBar/AppBar.tsx
+++ b/src/components/appBar/AppBar.tsx
@@ -61,6 +61,8 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
   const [selectedSystem, setSelectedSystem] = useSelectedSystemSummaries();
   const [changePasswordDialogOpen, setChangePasswordDialogOpen] = useState(false);
 
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   const isMenuOpen = Boolean(anchorEl);
 
   const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
@@ -175,7 +177,11 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
                   </TextField>
                   <Box className={classes.tooltipContainer}>
                     {selectedSystem && !isGlobalSystemSwitchDisabled && (
-                      <Tooltip title={t("common.delete")} className={classes.tooltip} onClick={handleSystemDelete}>
+                      <Tooltip
+                        title={tooltipText("common.delete")}
+                        className={classes.tooltip}
+                        onClick={handleSystemDelete}
+                      >
                         <CancelIcon />
                       </Tooltip>
                     )}
diff --git a/src/components/dashboard/content/list/FaultTreeOverview.tsx b/src/components/dashboard/content/list/FaultTreeOverview.tsx
index 91d6e779..89cc5c0c 100644
--- a/src/components/dashboard/content/list/FaultTreeOverview.tsx
+++ b/src/components/dashboard/content/list/FaultTreeOverview.tsx
@@ -10,7 +10,7 @@ import { useFaultTrees } from "@hooks/useFaultTrees";
 import FaultTreeContextMenu from "@components/editor/faultTree/menu/faultTree/FaultTreeContextMenu";
 import FaultTreeEditDialog from "@components/dialog/faultTree/FaultTreeEditDialog";
 import FaultTreeDialog from "@components/dialog/faultTree/FaultTreeDialog";
-import { Box, Button } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { SELECTED_VIEW } from "@utils/constants";
 import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
@@ -33,6 +33,9 @@ const FaultTreeOverview = () => {
     key: "date",
     direction: "desc",
   });
+
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   const isTreeCreationDisabled = !selectedSystem;
 
   useEffect(() => {
@@ -88,7 +91,7 @@ const FaultTreeOverview = () => {
     <Box flexDirection="column">
       <Box display="flex" flexDirection="row-reverse">
         <OverviewTypeToggler selectedView={selectedView} toggleView={toggleView} />
-        <Tooltip title={isTreeCreationDisabled ? t("create.systemRequired") : ""}>
+        <Tooltip title={isTreeCreationDisabled ? tooltipText("create.systemRequired") : ""}>
           <span>
             <Button
               variant="contained"
diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx
index 14c0c867..5547ec68 100644
--- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx
+++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx
@@ -98,6 +98,8 @@ const EditorCanvas = ({
   const [showSnackbar] = useSnackbar();
   const { isModified, setShowUnsavedChangesDialog } = useAppBar();
 
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   let dragStartPosition = null;
 
   useEffect(() => {
@@ -369,12 +371,12 @@ const EditorCanvas = ({
               onChange={handleMinOperationalHoursChange}
               {...props}
             />
-            <Tooltip title={t("diagramSidePanel.faultTree.refreshButtonToolTip")}>
+            <Tooltip title={tooltipText("diagramSidePanel.faultTree.refreshButtonToolTip")}>
               <IconButton aria-label="restore layout" size="large" onClick={handleReset}>
                 <RestartAltIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title={t("diagramSidePanel.faultTree.playButtonToolTip")}>
+            <Tooltip title={tooltipText("diagramSidePanel.faultTree.playButtonToolTip")}>
               <IconButton aria-label="restore layout" size="large" onClick={handleSetNewDefaultOperationalHours}>
                 <PlayArrow />
               </IconButton>
diff --git a/src/components/editor/menu/DiagramOptions.tsx b/src/components/editor/menu/DiagramOptions.tsx
index 2152ba03..6808a190 100644
--- a/src/components/editor/menu/DiagramOptions.tsx
+++ b/src/components/editor/menu/DiagramOptions.tsx
@@ -30,18 +30,20 @@ const DiagramOptions = ({
   const { t } = useTranslation();
   const { classes } = useStyles();
 
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   return (
     <>
       <Typography variant="h6" className={classes.menuTitle} gutterBottom>
         {t("diagramSidePanel.diagramOptions")}
       </Typography>
       <div>
-        <Tooltip title={t("diagramSidePanel.autoLayoutToolTip")}>
+        <Tooltip title={tooltipText("diagramSidePanel.autoLayoutToolTip")}>
           <IconButton color="primary" onClick={onApplyAutomaticLayout} aria-label="restore layout" size="large">
             <AccountTreeIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip title={t("diagramSidePanel.exportToolTip")}>
+        <Tooltip title={tooltipText("diagramSidePanel.exportToolTip")}>
           <IconButton color="primary" onClick={onExportDiagram} aria-label="save" size="large">
             <SaveAltIcon />
           </IconButton>
@@ -52,7 +54,7 @@ const DiagramOptions = ({
           </IconButton>
         )}
         {onCutSetAnalysis && (
-          <Tooltip title={t("diagramSidePanel.cutsetToggleToolTip")}>
+          <Tooltip title={tooltipText("diagramSidePanel.cutsetToggleToolTip")}>
             <IconButton color="primary" onClick={onCutSetAnalysis} size="large">
               {rendering ? <CircularProgress size={24} /> : <RouteIcon />}
             </IconButton>
diff --git a/src/components/editor/system/canvas/EditorCanvas.tsx b/src/components/editor/system/canvas/EditorCanvas.tsx
index ace5aae8..3c955186 100644
--- a/src/components/editor/system/canvas/EditorCanvas.tsx
+++ b/src/components/editor/system/canvas/EditorCanvas.tsx
@@ -64,6 +64,8 @@ const EditorCanvas = ({
   const [updatedMinOperationalHours, setUpdatedMinOperationalHours] = useState(getSystemOperationalHours());
   const [inputColor, setInputColor] = useState("");
 
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   useEffect(() => {
     const canvasWidth = containerRef.current.clientWidth;
     const canvasHeight = containerRef.current.clientHeight;
@@ -267,7 +269,7 @@ const EditorCanvas = ({
             value={updatedMinOperationalHours}
             onChange={handleMinOperationalHoursChange}
           />
-          <Tooltip title={t("diagramSidePanel.system.refreshButtonToolTip")}>
+          <Tooltip title={tooltipText("diagramSidePanel.system.refreshButtonToolTip")}>
             <IconButton
               aria-label="restore layout"
               size="large"
@@ -276,7 +278,7 @@ const EditorCanvas = ({
               <RestartAltIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip title={t("diagramSidePanel.system.checkButtonToolTip")}>
+          <Tooltip title={tooltipText("diagramSidePanel.system.checkButtonToolTip")}>
             <IconButton
               aria-label="restore layout"
               size="large"
diff --git a/src/components/materialui/ControlledAutocomplete.tsx b/src/components/materialui/ControlledAutocomplete.tsx
index 31999a44..42b2d132 100644
--- a/src/components/materialui/ControlledAutocomplete.tsx
+++ b/src/components/materialui/ControlledAutocomplete.tsx
@@ -70,6 +70,8 @@ const ControlledAutocomplete = ({
   const [newOptionValue, setNewOptionValue] = useState(null);
   const { t } = useTranslation();
 
+  const tooltipText = (messageCode) => <Typography>{t(messageCode)}</Typography>;
+
   const handleOnClick = (e) => {
     onCreateEventClick(e);
     setMenuOpen(false);
@@ -112,7 +114,7 @@ const ControlledAutocomplete = ({
           <Grid item>{getOptionLabel(option)}</Grid>
           <Grid item>
             {option?.newOption && (
-              <Tooltip title={t("newFtaModal.createEvent")}>
+              <Tooltip title={tooltipText("newFtaModal.createEvent")}>
                 <AddCircle style={{ color: "green" }} />
               </Tooltip>
             )}