CSS Only Animated Tooltip

Developer
Sjmcpherson
Size
3,218 Kb
Views
8,096
  1. CSS Only Animated Tooltip Previews
  2. CSS Only Animated Tooltip HTML Codes
  3. CSS Only Animated Tooltip CSS Codes

How do I make an css only animated tooltip?

IE9+ CSS Only Animated Tooltip. What is a css only animated tooltip? How do you make a css only animated tooltip? This script and codes were developed by Sjmcpherson on 24 September 2022, Saturday.

CSS Only Animated Tooltip Previews
IQ Test

CSS Only Animated Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Animated Tooltip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="wrapper"> <img src="https://www.avantiplus.co.nz//images/upload/dd283717684a4f088387849a4b6ec7ea.gif" alt="PRO DEALER Avanti" title="PRO DEALER Avanti" height="26" border="0"> <div class="tooltip"><p>A+ Dynamic Bike Fit System</p> <p>Trained staff use computer software and video footage to ensure the perfect set up on any bike maximising efficiency and comfort.</p></div>
</a>
<a class="wrapper"> <img src="https://www.avantiplus.co.nz/images/upload/b937d411507e4a0fb5412841fade4e09.jpg" alt="PRO DEALER Avanti" title="PRO DEALER Avanti" height="26" border="0"> <div class="tooltip"><p>Pro Dealer - Avanti</p>
<p>Offering a wider range of premium Avanti bikes.</p></div>
</a>
<a class="wrapper"> <img src="https://www.avantiplus.co.nz/images/brands/farmers.gif" alt="PRO DEALER Avanti" title="PRO DEALER Avanti" height="26" border="0"> <div class="tooltip"><p>Farmers Finance Available</p>
<p>Accepts Farmers Finance Card for your convenience.</p></div>
</a>
<footer> </br><small>IE9+ CSS Only Animated Tooltip</small>
</footer>
</body>
</html>

CSS Only Animated Tooltip - Script Codes CSS Codes

body { text-align: center; padding: 200px 0; font-family: Tahoma, Helvetica, san-serif;
}
.wrapper { cursor: help; position: relative; display: inline-block; text-align: center; margin: 2px; transform: translateZ(0); /* webkit flicker fix */ -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.wrapper .tooltip { font-family: arial; background: #005295; bottom: 100%; text-align: left; box-sizing: border-box; border: 1px solid #003662; border-bottom: 5px solid #003662; color: #fff; font-size: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: block; left: 50%; width: 200px; margin-left: -100px; margin-bottom: 15px; opacity: 0; padding: 15px; pointer-events: none; border-radius: 10px; position: absolute; transform: translateY(10px); transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before { bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%;
}
.tooltip p:first-child { font-weight: bold;
}
.tooltip p { margin: 0 0 4px; font-size: 13px; line-height: 1.2em;
}
.wrapper .tooltip:after { border-left: solid transparent 12px; border-right: solid transparent 12px; border-top: solid #003662 12px; bottom: -15px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0;
}
.wrapper:hover .tooltip { opacity: 1; pointer-events: auto; transform: translateY(0px);
}
CSS Only Animated Tooltip - Script Codes
CSS Only Animated Tooltip - Script Codes
Home Page Home
Developer Sjmcpherson
Username sjmcpherson
Uploaded September 24, 2022
Rating 3
Size 3,218 Kb
Views 8,096
Do you need developer help for CSS Only Animated Tooltip?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sjmcpherson (sjmcpherson) Script Codes
Name
CSS animated notification badge
Rollover CSSS Blur Filter Image Gallery
Shake Me Error Signup Form using Angular
Expanding Info Box
AngularJS View only DOM manipulation
CSS backface-visibility contact form
Blockquote design
A Pen by sjmcpherson
CSS3 3D Shirt Flipper
File API demo
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!