Adding a simple tooltip into your page isn’t hard. You can find a bunch of free tooltip plugins and JS scripts that can help with this.
But pure CSS is another option, and it’s quickly becoming the preferred choice for many web designers. If you’re looking for CSS tooltips, then this collection should have something for you.
All of these snippets come from CodePen, and they’re freely available to fork, copy, and restyle for your website.
The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
1. Product Feature Highlights
Let’s kick this off with a doozy from web developer Ian Farb. His snippet for a product feature tooltip is simply incredible. Definitely unique and not something you see every day!
By appending some tooltips onto div elements you can position them anywhere on top of an image. This way the user can hover to get information about the product’s style, design, format, whatever.
The tooltips themselves look super clean with a white background + a small drop shadow. They can work with any layout style so they’re perfect for product callouts.
2. Animated CSS Tooltips
Looking for custom animation styles on your tooltips? Then Markus Bruch’s animated tips should do wonders on your site.
These come in three different styles: fading, expanding, and a swing motion.
All of them are pretty simple to add into the page and they use the HTML5 data-title attribute for defining the tooltip text. This means you don’t need much extra HTML to get these working, plus they’re fully semantic to boot.
You can even use this as a template for customizing your own CSS animations to build on top of Markus’ work.
3. Automation Tooltips
Even though these aren’t pure CSS I had to include them because they’re just so practical. I would not say these tooltips are for everyone because they require a specific type of site to really “fit in” with the content.
Still this design is fantastic and the code snippets work perfectly.
All of the CSS runs over Sass, and the HTML runs on Pug, but you can compile both into raw code right inside CodePen if you want to copy/paste directly to your layout.
4. Animated Question
I often see little question mark icons in larger forms and more complex pages. They’re useful for grabbing attention and informing users about specific parts of the page.
You can replicate this style using this animated question tooltip running on pure CSS. It even has its own custom animation style which you can see while hovering.
Again this works on the HTML5 data-* attribute so all of your tooltip text can go right inside.
With the code being fully open sourced you can even change the animation style and the color scheme to blend in better as needed.
5. Quick Tips in Pure CSS3
I think these tooltips are perfect as everyday run-of-the-mill tooltips for any website.
They work on pure CSS3, and they’re super easy to customize if you dig a bit into the code.
By default each tooltip uses a slightly darkened background with a translucent opacity. This can be tough to read if your tooltip appears on top of another paragraph. But with a small change to the CSS you can restyle the color scheme for readability.
6. No-JS Tooltips
Chris Yaxley designed these non-JS tooltips which also run on pure CSS. They don’t have custom animation effects so they might feel a bit stale compared to some others in this list.
But they are fully compliant with modern browsers, and they behave exactly as you’d expect.
Sometimes removing the animations works in your favor. It’s like a no-nonsense design where you’re sharing the tooltip info straight away, no funny business.
7. Animated Button with Tooltip
This custom animated button tooltip is certainly unique. It appears when hovering and fades into view with a top-down animation style.
Developer Aditya Bhandari created this tooltip with the most widely-supported CSS3 properties. It works on any button or link using the class .button and appears with pseudo-classes :before and :after.
Keep this in mind if you’re designing a page with downloads or signup forms. You can add this tooltip onto any button to share pertinent info with users.
8. Pure CSS Tips in Text
I’m a big fan of the text-based tooltips since they’re traditional on the web. With these pure CSS tips you’ll not only get a clean interface, but also a really cool animation effect while hovering.
The actual tooltip has a small delay which is typical of the standard browser tooltip. This one uses CSS animations to float into view. Plus it changes the default cursor style to a question mark cursor, which is a design pattern related to links that aren’t usually clickable.
Pretty simple setup for a gorgeous final result. And the fact it runs on pure CSS is even more impressive.
9. Information Tooltip
Here’s another informative-type tooltip using the “i” info icon. You can easily copy this CSS to run on any page element that might support an info-based tooltip.
The animation style is super clean, albeit a little slow for my taste. Thankfully you have full access to the source code so you can change the animation speed, style, location, and pretty much everything else.
One other point to note is how this design uses an SVG element for the icon. This certainly isn’t necessary but it’s a great way to reduce images on your page.
10. Donut Chart with Tooltips
Data charts always work better with tooltips. This way you can share extra data about certain segments of the chart, even if there’s not much room on the page.
The tooltips appear based on JS data so none of it requires any HTML. This makes it tougher to customize but also gives you more control over your tooltip styles, positions, and behaviors.
If you dig through this list you’re bound to find something you can use. Although if you are looking for more ideas check CodePen and see what you can find.
- 8 Ways to Make the Search Field Sexy with CSS
- Share Your Story with These Terrific Timelines
- Beyond Bland: HTML Lists with Style
- On the Downlow(res): A Showcase of CSS Pixel Art
- 10 Creative Code Examples of Media Player Design
- Fun Examples of CSS Imitating Print Design
- Forge Your Own (Animation) Path with These Snippets