Hola, tengo una página de perfil en mi sitio web y estoy mostrando la imagen del titular del perfil usando el componente material-ui Avatar. Quiero mostrar el nombre del titular del perfil en el centro del avatar y se muestra el código de muestra.
<div {...otherProps} style={{ display: 'block', margin: 'auto' }}> <StyledBadge overlap="circular" anchorOrigin={{ vertical: 'bottom', horizontal: 'right', }} variant={showBadge ? "dot" : "standard"} > <Avatar alt="avatar" src={src || defaultImg} className={clsx(classes.avatar, classes[size])} /> </StyledBadge> </div>Puede usar el componente Tooltip de MUI:
import Tooltip from "@material-ui/core/Tooltip"; import Avatar from "@material-ui/core/Avatar"; ... <Tooltip title={userName}> <Avatar src={userProfilePicture}></Avatar> </Tooltip>Consulte también la página de documentación del material Tooltip