But pure CSS is often a better option and has become the preferred choice for many web designers. If you’re looking for pure CSS tooltips, then this collection of free code snippets should have something for you. All of the below tooltip snippets are available for you to fork, copy, or restyle for your website.
1. Product Feature Highlights by Ian Farb
We kick off with a snippet for a product feature tooltip. And, it is simply incredible. By appending the tooltips onto a
DIV element, you can position them anywhere on top of an image. This way, the user can hover to get further information about the product’s style, design, format, whatever.
The tooltips themselves look clean with a white background and a small drop shadow. These example tooltips can be used in any layout style, so they are perfect for product callouts.
2. Animated CSS Tooltips by Markus Bruch
If you are looking for custom animated tooltips, this CSS snippet is for you. The tooltips come in three different styles:fading, expanding, and swing motion.
They are all fairly simple to add to any page, and use the HTML5
data-title attribute for defining the tooltip text. This means you don’t need any extra HTML to get these working.
3. Automation Tooltips by Adwin
Even though they have not been built using pure CSS, we had to include them because they’re just so practical. We wouldn’t say these tooltips are for everyone because they require a specific type of site to really “fit in” with the content.
4. Animated Question by Sasha Tran
You often see little question mark icons in larger forms and more complex pages. They’re useful for informing users about specific parts of the page or for further guidance.
Again this works on the HTML5
data-* attribute, so all of your tooltip information can go right inside. And, with the code being fully open-sourced, you can even edit the animation style and color scheme to blend in better with your own project.
5. Quick Tips in Pure CSS by deineko
These tooltips are perfect as everyday run-of-the-mill tooltips for any website. They work on pure CSS, and they’re effortless to customize if you dig 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 by Chris Yaxley
These tooltips don’t have custom animation effects, so they might feel a bit stale compared to some of the others in this collection. But they are fully compliant with modern browsers, and they behave exactly as you would expect.
7. Animated Button with Tooltip by Aditya Bhandari
This custom animated button tooltip is certainly unique. It appears when hovering and fades into view with a top-down animation. It works on any button or link using the class
.button, and appears using the pseudo-classes
:after. This tooltip would be useful if you are designing a page with a download section or signup forms.
8. Pure CSS Tips in Text by Pure-CSS
We are big fans of text-based tooltips since they are a classic of the web. With these pure CSS tips, you will not only get a clean user interface but also a really nice animation effect while hovering.
The actual tooltip has a small delay which is typical of the standard browser tooltip. It uses CSS animation to float into view. Plus, it changes the default cursor style to a question mark cursor, a design pattern related to links that aren’t usually clickable.
9. Information Tooltip by Cristina Silva
This example is another information-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 clean, but it is a little slow for our taste. Thankfully you have full access to the source code, so you can edit the animation speed, style, location, and pretty much everything else.
10. Donut Chart with Tooltips by Hiro