Hi i have a profile page in my website and i am displaying the image of the profile holder using the material-ui Avatar component i want to show the name of the profile holder in the center of avatar and the sample code is given blow
<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>
You can use Tooltip component from MUI:
import Tooltip from "@material-ui/core/Tooltip";
import Avatar from "@material-ui/core/Avatar";
...
<Tooltip title={userName}>
<Avatar src={userProfilePicture}></Avatar>
</Tooltip>
See also Tooltip material doc page