You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey, could someone explain to me why we had to use display: inline-block in the .profile-picture-container in lesson 16d? This lesson is about creating and showing a tooltip for the channel picture. When I removed the line, there wasn't a noticeable difference to me. Here's the code from the solution:
Hey, could someone explain to me why we had to use display: inline-block in the .profile-picture-container in lesson 16d? This lesson is about creating and showing a tooltip for the channel picture. When I removed the line, there wasn't a noticeable difference to me. Here's the code from the solution:
HTML
...
...
CSS:
.profile-picture-container {
position: relative;
display: inline-block;
}
.channel-tooltip {
background-color: white;
width: 200px;
padding: 12px 12px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
border-radius: 6px;
position: absolute;
top: 55px;
z-index: 300;
opacity: 0;
pointer-events: none;
display: flex;
align-items: center;
transition: opacity 0.15s;
}
.profile-picture-container:hover .channel-tooltip {
opacity: 1;
}
.channel-tooltip-picture {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 8px;
}
.channel-tooltip-name {
font-family: Roboto, Arial;
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
}
.channel-tooltip-stats {
font-family: Roboto, Arial;
color: rgb(96, 96, 96);
font-size: 14px;
}
Thanks in advance!
The text was updated successfully, but these errors were encountered: