CSS Only Tooltip

I remember the days when I was building tooltips with jQuery. They were so flashy and cool, I used them in nearly all my projects, whether they required a tooltip or not. Over the years, tooltips have slowly faded out of favor of designers and developers, but there are still plenty of legitimate uses.

If you’ve read any of my other blog posts, it’s probably fairly obvious that I’m kind of obsessed with replacing jQuery with CSS wherever possible. Tooltips is another perfect example. We can accomplish the same thing with either, but one has a distinct advantage over the other.

jQuery Hover

CSS Hover

There doesn’t appear to be much difference between the two solutions. They are similar in character length, and they are both supported across all modern browsers.

The difference? Using the jQuery method requires you to add the jQuery library. jQuery 2.1.0 (production release) currently weighs in at 81.6 KB. That doesn’t sound like much, but you should also consider that you have to make a separate HTTP request to pull this file in. Sure…it might only be milliseconds worth of difference, but any improvement is an improvement in my book.

Ok – enough of my CSS > jQuery talk. Lets look at how we can create this cool effect with pure CSS.

The Demo

Hover Over Me

I think it looks great.


Nothing overly complicated here. I choose to use a placehold.it image to demonstrate that it doesn’t need to be just text in the tooltip, you can also add media like images or videos as well.


This is where the magic happens. As you can see, the tooltip itself is absolutely positioned above the hovered element. It’s first set to an opacity of 0 so that you cannot see it until you hover over the element. We create the fade in and fade out animation using some CSS transitions, and create the thought bubble pointer using some sneaky CSS border tricks!

You can change anything about this tooltip. The colors, font, tooltip size – everything can be modified. If you can do it in CSS, you can add it to your tooltip. My example was specifically created to match the design of this website, so don’t feel that you have to match my colors.

The Result

Hover Over Me

Pretty cool, huh? Not overly complicated. Remember, you can replace what’s inside the tooltip with whatever you’d like – an image, more text, styled content, other media – it’s completely up to you!

Categories Blog