How to we can create different types of tooltip animation using CSS? Solution: See this CSS Tooltip Animation Effects On Hover, HTML Hint Types.
Previously I have shared a floating social share button where I have used tooltips, but it is only about tooltip. Basically, The tooltip or info tip or a hint is a common graphical user interface element to show extra information to users. You can see the hints on mouse over or hover, these kinds of tooltip you can see on multiple places.
Today you will learn to create HTML Hint with 3 types of animations. There are 3 types of tooltip animations which are the fade effect, expand effect, and swing effect. These all are for showing you how many types of tooltip you can create, there are only three you can create more after understanding the concept.
So, Today I am sharing CSS Tooltip Animation Effects On Hover. For creating these animations I have used pure CSS and HTML, there are no JavaScript or any other libraries. This program will be best practice for you if you are a beginner in HTML CSS. You can use these tooltips or hints on your website for basic info to users.
If you are thinking now how this tooltip animations actually are, then see the preview given below.
Preview Of HTML Hint Types
See this video preview to getting an idea of how these hints looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- CSS Contact vCard Design
- Dark Mode Toggle With Clip Path
- Nested List Dropdown
- JavaScript Animated Bar Graph
CSS Tooltip Animation Effects On Hover Source Code
Before sharing source code, let’s talk about it. First I have created 3 separate list using HTML <ul> & <li> tags with their list items. As you know there are 3 types of animations that’s why I have created three different lists. But those lists have a unique class name because of different animation.
There I have used HTML Data-* attribute for storing tooltip text (info). Now using CSS I have placed all the elements in the right place, as you can see in the preview. For creating the tooltip effects I have mostly used :before and :after tags or properties. Inside these tags used transform & transition commands.
Left all other things you will understand after getting the codes, I can’t explain in writing. For creating this concept you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Animated CSS Tooltips</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>FADE EFFECT</h1> <ul> <li class="tooltip fade" data-title="Hypertext Markup Language">HTML <li class="tooltip fade" data-title="Cascading Stylesheets">CSS <li class="tooltip fade" data-title="Javascript">JS </ul> <h1>EXPAND EFFECT</h1> <ul> <li class="tooltip expand" data-title="Hypertext Markup Language">HTML <li class="tooltip expand" data-title="Cascading Stylesheets">CSS <li class="tooltip expand" data-title="Javascript">JS </ul> <h1>SWING EFFECT</h1> <ul> <li class="tooltip swing" data-title="Hypertext Markup Language">HTML <li class="tooltip swing" data-title="Cascading Stylesheets">CSS <li class="tooltip swing" data-title="Javascript">JS </ul> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { margin: 0 auto; text-align: center; align-content: center; font-family: 'Rubik', sans-serif; color: #212121; background-color: #d7d4ef; } h1 { padding-left: 50px; } ul { margin-bottom: 40px; } li { cursor: pointer; display: inline-block; padding: 0 10px; } .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; } .tooltip:after { border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,.75); border-left: 6px solid transparent; content: ''; height: 0; top: 20px; left: 20px; width: 0; } .tooltip:before { background: rgba(0,0,0,.75); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: 26px; white-space: nowrap; } .tooltip.fade:after, .tooltip.fade:before { transform: translate3d(0,-10px,0); transition: all .15s ease-in-out; } .tooltip.fade:hover:after, .tooltip.fade:hover:before { opacity: 1; transform: translate3d(0,0,0); } .tooltip.expand:before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out; } .tooltip.expand:after { transform: translate3d(0,6px,0); transition: all .1s ease-in-out; } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1; transform: scale3d(1,1,1); } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } .tooltip.swing:before, .tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg); transform-origin: 0 0; transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:after { transform: translate3d(0,60px,0); transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:hover:before, .tooltip.swing:hover:after { opacity: 1; transform: translate3d(0,0,0) rotate3d(1,1,1,0deg); } @media (max-width: 765px) { body { text-align: left; } } |
That’s It. Now you have successfully created CSS Tooltip Animation Effects On Hover, HTML Hint Types. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
