DEV Community

Cover image for CSS Only Tooltips
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Only Tooltips

Today we will be building some tooltips with nothing more than CSS. The idea is we hide the tooltip, and we will show it once hovering over the div.

Note: These tooltips must have a fixed width to work!

HTML Structure

As for the HTML, we use the following setup:

<div class="skills">
  <div class="skills-item">
    <span class="tooltip">HTML5</span>
    <!-- Content -->
  </div>
  <div class="skills-item">
    <span class="tooltip">CSS3</span>
    <!-- Content -->
  </div>
  <div class="skills-item">
    <span class="tooltip">JavaScript</span>
    <!-- Content -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This will give us a basic grid like setup!

CSS Only Tooltips

As for the CSS which is going to be the main part of this article, we will use some basic styling to style the boxes next to each other.

.skills {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 50vw;
  margin: 0 auto;
  height: 100vh;
  align-items: center;
}
.skills-item {
  background: #fff;
  padding: 10px;
  margin: 5px;
  position: relative;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

This is our basic template; we are using a basic grid solution and center the elements.

Let's now style the tooltip:

.skills-item .tooltip {
  width: 100px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

The main important parts here lay in the default hidden structure; we also add a transition so it will animate once we hover.

Now we will also add a small triangle in the center, just a touch of extra CSS

.skills-item .tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
Enter fullscreen mode Exit fullscreen mode

So now let's move on to making it actually show!

.skills-item:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

That's it. We can now view our awesome tooltip in action.

View it on Codepen.

See the Pen CSS Only Tooltips by Chris Bongers (@rebelchris) on CodePen.

Alt Text

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (11)

Collapse
 
kallmanation profile image
Nathan Kallman

This can be done without the fixed width and without the extra markup and classes:

Collapse
 
link2twenty profile image
Andrew Bone
Collapse
 
dailydevtips1 profile image
Chris Bongers

Very nice, I love how many ways there are to solve one problem.
Definitely going to give the attributes a try

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hey, That's a very neat solution man!
How is the browser support on those selectors?

I do guess my solution could be converted to use the dynamic width, but I like your approach!

Collapse
 
kallmanation profile image
Nathan Kallman

I haven't tested extensively... but caniuse gives pretty wide support:
caniuse.com/#feat=css-gencontent
caniuse.com/#search=attribute%20se...
caniuse.com/#feat=calc

The most problematic one looking to be calc in IE may or may not work correctly

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Nice, I'm going to give them a try

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Awesome, these selectors are amazing, created the alternative way as well:

dev.to/dailydevtips1/css-only-tool...

Collapse
 
alyatek profile image
alyatek

Why did you take a screenshot of the Codepen instead of embeding it?!

Collapse
 
dailydevtips1 profile image
Chris Bongers

It is embedded above, but dev.to doesn't seem to render the codepens. So someone asked me if i could at-least add images so they could see how it looks.

Collapse
 
link2twenty profile image
Andrew Bone • Edited

You can input a line like this in you markdown

{% codepen https://codepen.io/rebelchris/pen/LYNEYEv %}

and it will render like this in your post

There's plenty of good stuff in the editor guide

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Awesome man, It seems to work different on all platforms haha, probably should have read the editor guide yes 🀯