added tooltips to display the overlay message

src/common/StatusPlenum.tsx

@@ -1,4 +1,4 @@
-import { Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
@@ -46,8 +46,42 @@ export default function StatusPlenum(props: Props) {
     return () => clearInterval(interval);
   }, []);
 
+  const tooltip = () => {
+    if (messages.length === 0) return null
+    if (messages.length < 2) return (
+      messages[0]
+    )
     return (
-    <Tooltip title={"Hello :)"}>
+      <Grid2 container direction={"column"}>
+        <Grid2 container direction="row">
+          <Typography fontWeight={"bold"} variant="caption">
+            Overlay Messages
+          </Typography>
+        </Grid2>
+        {messages.map((message, index) => {
+          return (
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+              <Box
+                sx={{
+                  width: 10, // Size of the square
+                  height: 10,
+                  backgroundColor: colors[index], // Passed color prop
+                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
+                  border: "1px solid black",
+                }}
+              />
+              <Typography variant="caption" sx={{ marginLeft: 1 }}>
+                {message}
+              </Typography>
+            </Grid2>
+          )
+        })}
+      </Grid2>
+    )
+  }
+
+  return (
+    <Tooltip title={tooltip()}>
       <PulseBox color={color} className={classes.box} >
         <Grid2 container direction="column" >
           <Grid2>