This project is a Tooltip built entirely with HTML & CSS — no JavaScript required! Tooltips are small popups that appear when you hover over an element, perfect for adding extra info without cluttering your UI.
Features:
-
🎯 Pure CSS Only (no JavaScript)
-
🎨 Clean, modern design with Poppins font
-
🖱️ Smooth hover animation & scaling effect
-
🌑 Stylish dark tooltip with subtle shadow
-
📱 Responsive & lightweight
Why this project?
If you’re learning CSS transitions, positioning, and pseudo-elements, this is the perfect project. You’ll understand how to create interactive hover effects while keeping your code clean and simple.
You can easily customize the tooltip color, position, and animation to match your website’s theme.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tooltip with CSS Only | CodingPorium</title> <style> /* Import Poppins Font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body{ font-family: poppins,sans-serif; background: #f9f9f9; margin: 0; padding: 40px; display: flex; justify-content: center; align-items: center; height: 100vh; } .tooltip-container{ position: relative; display: inline-block; } .btn{ font-family: poppins,sans-serif; background: #1e1e2f; color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn:hover{ background: royalblue; } /* Tooltip styling */ .tooltip{ position: absolute; bottom: 120%; left:50%; transform: translateX(-50%) scale(0.9); background: #3a3a55; color:#fff; padding: 10px 14px; border-radius:6px; font-size: 14px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.25s ease; box-shadow:0 4px 8px rgba(0,0,0,0.25); } .tooltip::after{ content:""; position: absolute; top:100%; left:50%; transform:translateX(-50%); border-width:6px; border-style:solid; border-color:#3a3a55 transparent transparent transparent; } /* Show on hover */ .tooltip-container:hover .tooltip{ opacity:1; transform:translateX(-50%) scale(1); pointer-events: auto; } </style> </head> <body> <div class="tooltip-container"> <button class="btn">Hover Me</button> <div class="tooltip">✨ Try this feature on CodingPorium!</div> </div> </body> </html>
✨ With just a few lines of code, you’ve built your own version of this project! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment