DEV Community

Cover image for Daily Code 71 | Tooltips (🟥 HTML & 🟦 CSS Course 13)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 71 | Tooltips (🟥 HTML & 🟦 CSS Course 13)

It’s HTML & CSS course day 13 and the second-to-last lesson! https://www.youtube.com/watch?v=G3e-cpL7ofc

My Code

I can select specific elements only inside certain other elements (with a class) by using syntax like this selector below. That’s really cool and useful to avoid having to giving every single element its own class!

.sidebar-link img {
  height: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Here is some more interesting CSS that I learned about to make the tooltips. It’s a nice trick to use the opacity to hide and show them. they are actually always there, it’s just that they are hidden unles there is the mouseover over the object.

.search-button,
.voice-search-button,
.upload-icon-conatainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.search-button .tooltip,
.voice-search-button .tooltip,
.upload-icon-conatainer .tooltip {
  font-family: Roboto, Arial;
  position: absolute;
  background-color: gray;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
  bottom: -30px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
}

.search-button:hover .tooltip,
.voice-search-button:hover .tooltip,
.upload-icon-conatainer:hover .tooltip {
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

I realize that these exercises and my takeaways got a bit borin over the last few days, so good that there is only one more left after this. Time to tackle something new the coming days!

Top comments (0)