What are you most proud of, and what would you do differently next time?
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");
}
}
