DEV Community

Cover image for CSS Challenges #2 | Tooltips
Milan Radojević
Milan Radojević

Posted on


CSS Challenges #2 | Tooltips

The first week of this series is already over and to be honest the challenge has received more attention than I expected so I'm glad that everyone is liking it.

Here's a post outlining different solutions that people came up with for implementing breadcrumbs, combined with some talk about how the html side should look like:

What is this

If you're new, hello there! It's good that you want to improve your skills with css. This is a series aimed at helping you do just that by challenging you to recreate a suggested feature or element. I'll only be posting challenges that will be of use when building stuff. So no code golf or obscure stuff.

This is a weekly challenge, so every Monday there will be a new thing to build. Also every Monday I'll summarise all the submissions to last week's challenge.

Post links to your solutions (codepens, jsfiddles, whatever your prefer) in the comments if you solved the challenge.


The topic this time is tooltips, used to display additional info about an element when it's being hovered over.


  • Tooltips should appear on :hover and :focus

Read More

That it for this week, have fun.

Top comments (6)

webdevquirke profile image
Jacob Quirke

Nice challenge to end my evening. Dropped in some animations just to keep up the practice. Any feedback on making cleaner and general better code would be very much appreciated -

tartufu profile image
Edmund Teo Chang Hao

Created an account just to try this challenge. Not too sure how i can make the text aligned in the middle of my div without causing the text to shift position when the tooltip appears...

lautarolobo profile image
Lautaro Lobo

Hey, cool! I think that if you add margin: 0 auto to .tooltip, you'll se your div content at the center without issues (I tried it myself within your CodePen and worked).

rose profile image

Nice exercise! It resulted in me learning a little more about where attr is headed in the future, I had no idea it will eventually support types and fallbacks until I started working on this challenge. Was excited to try them out but it looks like none of the browsers have implemented support yet, so I guess I'll have to wait a bit longer.

mikister profile image
Milan Radojević • Edited

Yup I wish there was more support. Right now only thing that's widely supported is using attr() to set content on pseudo elements.

sansk profile image
Sangy K

Here is my submission.

Added some animations. Still can add more. Feedback is appreciated.

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.