Design comparison
Solution retrospective
I am able to craft the tooltip's arrow using css tricks. Border width help determine the dimension of the arrow. 0 dimension is crucial in achieving the look along with making the adjacent borders as transparent. Removing the adjacent borders instead of making it transparent will not function as everything will be invisible especially when the dimension is set as 0.
.tooltip-wrapper::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: var(--space-s-1) solid transparent;
border-right: var(--space-s-1) solid transparent;
border-top: var(--space-s-1) solid var(--color-neutral-5);
}
What challenges did you encounter, and how did you overcome them?
Creating the tooltip's arrow using CSS was relatively challenging. I took inspiration from resources and I understood the nitty gritty details about how an arrow is created using 0 dimension approach and relying on border properties.
What specific areas of your project would you like help with?What do you think of the accessibility of my solution? (especially related to summoning and dismissing the tooltip)
HTML code snippet
...
JS code snippet
function toggleShareButtonAttributes() {
if (tooltip.classList.contains("invisible")) {
shareButton.removeAttribute("aria-describedby");
shareButton.setAttribute("aria-expanded", "false");
} else {
shareButton.setAttribute("aria-describedby", "tooltip");
shareButton.setAttribute("aria-expanded", "true");
}
}
Community feedback
- @CelineJamesPosted 3 months ago
Well done, I have also learnt something from your shared code snippets, Thank You.
1
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