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',
@@ -67,6 +69,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
                   >
                     {teachers.map(t => t.name).join(', ')}
                   </Typography>
+                </Tooltip>
               </Stack>
             </CardContent>
           </CardActionArea>

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',
-            // },
           ],
         },
         {