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:
Article No Longer Available
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
:hoverand:focus
Read More
That it for this week, have fun.
Top comments (6)
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
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
Hey, cool! I think that if you add
margin: 0 autoto.tooltip, you'll se your div content at the center without issues (I tried it myself within your CodePen and worked).Nice exercise! It resulted in me learning a little more about where
attris 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/JjjGwwYYup I wish there was more support. Right now only thing that's widely supported is using attr() to set
contenton pseudo elements.Here is my submission.
codepen.io/skay/full/eYYdOjq
Added some animations. Still can add more. Feedback is appreciated.