Design comparison
Solution retrospective
- The share message display and position
Community feedback
- @ricardoychinoPosted about 2 months ago
Hi, good job finishing the challenge!
About displaying and positioning, I am looking at the styling and I think the approach is a little bit overcomplicated. It could be simpler. It is awesome that you learned and applied
clip-path
property (I myself don't really know how to use it, to be honest), but I think you could get the desired result without it.But first, I think it is better to wrap the whole button
.card__profile--share
inside the<a>
tag, because currently the "tooltip" opens only when the icon per se is clicked, not the "button" (.card__profile--share
) - if the user clicks on the padding, for example, nothing really happens. That requires certain precision from the user, and that could led to some bad experience. So I recommend wrapping the whole button with the anchor tag. Also, as a bonus I'd define a height and width to make it a perfect circle. It is a bit elliptical currently.Now about the approach, I think you could:
(1) Remove the margins from
.card__action
("SHARE" text) and.card__socials--links
(the social icons wrapper)(2) Reduce the vertical padding from
.card__profile--social
, perhaps to:padding: 0.75rem 2.25rem;
This makes the tooltip visual fine, and with simple styling
(3) Now let's add the "tail" of the tooltip. You can do this by adding a pseudo-element ::after to the "tooltip" component, just like:
.card__profile--social::after{ /* Part 1 */ content: ""; /* Part 2 */ position: absolute; top: 100%; left: calc(50% - 10px); /* Part 3 */ border-top: 15px solid hsl(217, 19%, 35%); border-left: 10px solid transparent; border-right: 10px solid transparent; }
Let me explain the rule above in parts:
Part 1: Pseudo-elements always needs a
content
property, even if it is empty. If you don't add it to the rule, the browser will just ignore itPart 2: We need to position it relative to the content. As a pseudo-element is a child of the content and that content has the
position
defined, we just addposition: absolute
on it to position it as we wish.top: 100%
will position it right after the parent, as it jumps the full size of the parent.left: calc(50% - 10px)
will position it centered horizontally (50% of the parent width minus the half of its own size). This positioning makes it dynamic, so even if you need to change the content of the tooltip that will change its size later on the future, you won't need to redefine all these propertiesPart 3 This will define the shape of the "tail" per se. The
border-top
will be the "tail", with the same color as the content, and the border-width (15px
) is what will define how long the tail will be. Theborder-left
andborder-right
are needed to give it a triangular shape. Changing their width (10px
) will make the tail wider or thinner. Change them as you wish(4) Now for the final touch, it would be really helpful if we could split the
.card__profile--social
into two elements, such as:<div class="card__profile--social" id="card-social"> <div class="card__profile--social-wrapper"> <!-- p.card__action and div.card__socials --> </div> </div>
This way we can split the responsibilities,
.card__profile--social
for the visibility and positioning relative to father "button", and.card__profile--social-wrapper
for the styling and positioning. The result will be something like:.card__profile--social { position: absolute; bottom: calc(100% + 10px); /* Position of the whole component */ left: 50%; /* Right to the middle of the "button" */ visibility: hidden; } .card__profile--social-wrapper { padding: 0.75rem 2.25rem; /* The padding I mentioned before on (2) - we move to this rule */ margin-left: -50%; /* This will help position the tooltip right to the middle of "button" */ width: 100%; position: relative; /* We need this to position the "tail" */ /* The others are properties that already existed in .card__profile--social and I moved to this wrapper/styling class */ background-color: hsl(217, 19%, 35%); display: flex; align-items: center; gap: 1.5rem; border-radius: 0.5rem; } /* Let's move the "tail" ::after pseudo-element to the new element too */ .card__profile--social-wrapper::after { content: ""; position: absolute; top: 100%; left: calc(50% - 10px); border-top: 15px solid hsl(217, 19%, 35%); border-left: 10px solid transparent; border-right: 10px solid transparent; } /* Remove the margins as I mentioned on (1) */ .card__action { color: hsl(0, 0%, 100%); opacity: 0.7; text-transform: uppercase; letter-spacing: 3px; } .card__socials--links { display: flex; align-items: center; gap: 0.75rem; }
The point of adding a new element is that the parent
.card__profile--social
will have the size of its content, and we can use it to apply themargin-left: -50%
on.card__profile--social-wrapper
to center it inside the parent. If we don't add the new element, the parent will be the "button" element (.card__profile--share
), which has a smaller size. Since the % always are proportional to the element's parent, the margin-left won't have the desired result.I'm sorry for the lengthy comment, but I think this is the most common and a more dynamic approach. I hope this helps! Good job and keep it up!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord