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;
}

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;
}

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!