CSS Only Animated Tooltip

Developer
Size
3,218 Kb
Views
8,096

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

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
Create amazing blog posts 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!