CSS Only Tooltip

  • follow us in feedly
Published April 17, 2014 by Brad Knutson
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 MePure CSS!

I think it looks great.

The HTML

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.

The CSS

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 MePure CSS!

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!

What do you think? Let me know in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “CSS Only Tooltip

  1. Paul

    Hey Brad,

    Great blog. Just wondering, that first bit of CSS supposed to start with “position: relative;”? What’s the rule, or is that just a chunk of unrelated css?

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">