How to build an unfolding tooltip with CSS clip-path // HTML & CSS in-depth https://peertube.lagbag.com/videos/watch/82cb8628-b63c-4f8b-b053-1833aec01844 Learn to build a tooltip with an awesome unfolding effect effects using CSS clip-path in this in-depth episode about HTML & CSS and see how to ✔️ use the CSS clip-path property ✔️ make clip-paths smoothly transitionable ✔️ clip an element using the circle clip-path function ✔️ use the the :focus-within pseudo-class to make it work nicely on mobile devices ⌨️ CODE ⌨️ https://codepen.io/crayon-code/pen/ZEBxLPY 🖇️ USEFUL LINKS 🖇️ 🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties 🔗 CSS clip-path on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 🔗 circle clip-path on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape 🔗 :focus-within pseudo-class on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within 🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/complete-guide-grid/ 🔔 SUBSCRIBE & LIKE 🔔 ▶️ https://www.youtube.com/channel/UCqGvJhEVdtqwDk6ixVl5uOQ ⚙️ USEFUL VSCODE EXTENSIONS ⚙️ Live server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Bracket Pair Colorizer: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 ⏱️ TIMESTAMPS ⏱️ 00:00 Markup 01:36 Variable Setup & Basic Styling 03:42 Trigger Styling 06:13 Content Positioning & Styling 09:51 Unfolding effect 12:20 Mobile Device Compatibility 13:16 Additional Trigger Styling 👋 FOLLOW 📸 INSTAGRAM: https://www.instagram.com/crayon_code/ 🏷️ HASHTAGS 🏷️ #html #css​ #clippath #tutorial Sat, 18 Apr 2026 12:09:48 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://peertube.lagbag.com How to build an unfolding tooltip with CSS clip-path // HTML & CSS in-depth https://peertube.lagbag.com/client/assets/images/icons/icon-512x512.png https://peertube.lagbag.com/videos/watch/82cb8628-b63c-4f8b-b053-1833aec01844 All rights reserved, unless otherwise specified in the terms specified at https://peertube.lagbag.com/about and potential licenses granted by each content's rightholder.