DEV Community

loading...
Cover image for CSS Challenges #2 | Tooltips

CSS Challenges #2 | Tooltips

mikister profile image Milan Radojević ・1 min read

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.

Tooltips

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

Requirements

  • Tooltips should appear on :hover and :focus

Read More


That it for this week, have fun.

Discussion (6)

pic
Editor guide
Collapse
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 - codepen.io/jacobquirke/pen/jOOWXyz

Collapse
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...

codepen.io/teo-chang-hao/pen/QWWNoVE

Collapse
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).

Collapse
rose profile image
Rose

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. codepen.io/roseyrobertson/pen/JjjGwwY

Collapse
mikister profile image
Milan Radojević Author • 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.

Collapse
sansk profile image
Sangy K (She/Her)

Here is my submission.
codepen.io/skay/full/eYYdOjq

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