Add tooltip when hover teachers names

This commit is contained in:
Leonardo Murça 2022-06-22 22:34:32 -03:00
parent bf87ed2f8c
commit b7b796c07c
2 changed files with 17 additions and 18 deletions

View file

@ -7,6 +7,7 @@ import {
Avatar,
Stack,
AvatarGroup,
Tooltip,
} from '@mui/material';
function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
@ -54,19 +55,21 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
/>
))}
</AvatarGroup>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(',')}
</Typography>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{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>

View file

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