Daily Challenge #6 : The “CSS-Only” Tooltip System 🗨️

It is February 18th. Today, we are focusing on accessible and clean UI components without the bloat of external libraries.

The Mission

Create a fully functional tooltip system that appears when hovering over or focusing on an element. It must be positioned correctly and handle overflow gracefully.

The Rules 🚫

1. NO JavaScript Allowed : No toggling classes or calculating coordinates via script.
2. Pure CSS/HTML only : Use pseudo-elements (::before or ::after) or hidden sibling elements.
3. Accessibility : The tooltip must be visible to keyboard users (hint: use :focus-within or :focus).

The Goal 🏆

The tooltip should have a smooth “fade-in” or “slide-up” animation and stay attached to its parent element regardless of where that element is on the screen.

Pro Tip : Using attr(data-tooltip) in the content property of a pseudo-element is a great way to manage the text directly in your HTML!

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If the tooltip has a “beak” (the little triangle pointing to the target).
• Extra Credit : If the tooltip automatically flips to the top if there isn’t enough room at the bottom (challenging with pure CSS!).

Have fun!