From ad931d0c41d52fdb716bcebacf3d973a36b365cb Mon Sep 17 00:00:00 2001
From: Zainab2604 <zainabmb3@icloud.com>
Date: Sun, 15 Jun 2025 13:37:22 +0200
Subject: [PATCH] Add Tooltip for missing values

---
 .../src/components/KennzahlenTable.tsx        | 114 ++++++++++--------
 1 file changed, 61 insertions(+), 53 deletions(-)

diff --git a/project/frontend/src/components/KennzahlenTable.tsx b/project/frontend/src/components/KennzahlenTable.tsx
index 5808a5f..5a94dff 100644
--- a/project/frontend/src/components/KennzahlenTable.tsx
+++ b/project/frontend/src/components/KennzahlenTable.tsx
@@ -225,61 +225,69 @@ export default function KennzahlenTable({
 												</Box>
 											</Tooltip>
 										) : (
-											<Box
-												sx={{
-													border: `2px solid ${borderColor}`,
-													borderRadius: 1,
-													padding: "4px 8px",
-													display: "flex",
-													alignItems: "center",
-													justifyContent: "space-between",
-													width: "100%",
-													cursor: "text",
-												}}
+											<Tooltip
+												title={hasNoValue ? "Es wurde keine Kennzahl gefunden. Bitte ergänzen" : ""}
+												placement="bottom"
+												arrow
 											>
-												<Box
-													sx={{
-														display: "flex",
-														alignItems: "center",
-														gap: 1,
-														width: "100%",
-													}}
-												>
-													{hasNoValue && (
-														<ErrorOutlineIcon fontSize="small" color="error" />
-													)}
-													{editingIndex === row.setting.name ? (
-														<TextField
-															value={editValue}
-															onChange={(e) => setEditValue(e.target.value)}
-															onKeyDown={(e) =>
-																handleKeyPress(e, row.setting.name)
-															}
-															onBlur={() => handleSave(row.setting.name)}
-															autoFocus
-															size="small"
-															fullWidth
-															variant="standard"
-															sx={{ margin: "-8px 0" }}
+												<span>
+													<Box
+														sx={{
+															border: `2px solid ${borderColor}`,
+															borderRadius: 1,
+															padding: "4px 8px",
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "space-between",
+															width: "100%",
+															cursor: "text",
+														}}
+													>
+														<Box
+															sx={{
+																display: "flex",
+																alignItems: "center",
+																gap: 1,
+																width: "100%",
+															}}
+														>
+															{hasNoValue && (
+																<ErrorOutlineIcon fontSize="small" color="error" />
+															)}
+															{editingIndex === row.setting.name ? (
+																<TextField
+																	value={editValue}
+																	onChange={(e) => setEditValue(e.target.value)}
+																	onKeyDown={(e) =>
+																		handleKeyPress(e, row.setting.name)
+																	}
+																	onBlur={() => handleSave(row.setting.name)}
+																	autoFocus
+																	size="small"
+																	fullWidth
+																	variant="standard"
+																	sx={{ margin: "-8px 0" }}
+																/>
+															) : (
+																<span>
+																	{row.extractedValues.at(0)?.entity || "—"}
+																</span>
+															)}
+														</Box>
+														<EditIcon
+															fontSize="small"
+															sx={{ color: "#555", cursor: "pointer" }}
+															onClick={(e) => {
+																e.stopPropagation();
+																startEditing(
+																	row.extractedValues.at(0)?.entity || "",
+																	row.setting.name,
+																);
+															}}
 														/>
-													) : (
-														<span>
-															{row.extractedValues.at(0)?.entity || "—"}
-														</span>
-													)}
-												</Box>
-												<EditIcon
-													fontSize="small"
-													sx={{ color: "#555", cursor: "pointer" }}
-													onClick={(e) => {
-														e.stopPropagation();
-														startEditing(
-															row.extractedValues.at(0)?.entity || "",
-															row.setting.name,
-														);
-													}}
-												/>
-											</Box>
+													</Box>
+												</span>
+											</Tooltip>
 										)}
 									</TableCell>
 									<TableCell align="center">