10 CSS Code Snippets for Creating Tooltips
Adding a simple tooltip into your page or app isn’t difficult. You can easily find a multitude of JavaScript tooltip plugins and scripts that will all work perfectly well.
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.
See the Pen Highlight Product Features with CSS Tooltips by Ian Farb
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.
See the Pen Animated CSS Tooltips by Markus Bruch
3. Automation Tooltips by Adwin
With these automation tooltips, you’ll notice two things: they blend nicely with the anchor links, and they rely on just a little JavaScript.
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.
See the Pen Automation Tooltips with Simple Data Attributes by Adwin
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.
See the Pen Animated CSS Tooltip Concept by Sasha
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.
See the Pen Quick CSS3 tooltips (No images, no js) by deineko
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.
See the Pen No-JS Tool tips by Chris Yaxley
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 :before and :after. This tooltip would be useful if you are designing a page with a download section or signup forms.
See the Pen Animated Button with Tooltip (Pure CSS) by Aditya Bhandari
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.
See the Pen Pure-CSS Tooltips by Pure-CSS.com
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.
See the Pen Pure CSS Tooltip by Cristina Silva
10. Donut Chart with Tooltips by Hiro
This donut chart uses some incredible tooltips. Data charts always work better with tooltips. They allow you to share extra data and information about certain areas of the chart, even when there is not much room on the page. You will notice that this example does run with a little bit of JavaScript, but it’s primarily used for the donut graph effect.
The tooltips do appear based on the JavaScript data, so they don’t require any extra HTML. This makes it tougher to customize but also gives you more control over the style, position, and behavior of the tooltip.
See the Pen SVG Doughnut chart with animation and tooltip by Hiro
The post 10 CSS Code Snippets for Creating Tooltips appeared first on Speckyboy Design Magazine.