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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs