Add tooltip when hover teachers names

src/components/ClassCard.js

@@ -7,6 +7,7 @@ import {
   Avatar,
   Stack,
   AvatarGroup,
+  Tooltip,
 } from '@mui/material';
 
 function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
@@ -54,6 +55,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                     />
                   ))}
                 </AvatarGroup>
+                <Tooltip title={teachers.map(t => t.name).join(', ')}>
                   <Typography
                     sx={{
                       overflow: 'hidden',
@@ -65,8 +67,9 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                     variant="body2"
                     color="text.secondary"
                   >
-                  {teachers.map(t => t.name).join(',')}
+                    {teachers.map(t => t.name).join(', ')}
                   </Typography>
+                </Tooltip>
               </Stack>
             </CardContent>
           </CardActionArea>
@@ -116,7 +119,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                   variant="body2"
                   color="text.secondary"
                 >
-                  {teachers.map(t => t.name).join(',')}
+                  {teachers.map(t => t.name).join(', ')}
                 </Typography>
               </Stack>
             </CardContent>

src/context/user.js

@@ -34,10 +34,6 @@ const getClassrooms = userId =>
               name: 'Alexandre Couto Cardoso',
               avatar: '/assets/alex.jpg',
             },
-            // {
-            //   name: 'Alexandre Couto Cardoso',
-            //   avatar: '/assets/alex.jpg',
-            // },
           ],
         },
         {