In today's GUI Challenge, @AdamArgyleInk builds a tooltip with a custom element (no web component!), :has(), transforms, and logical properties. Besides a small backup script for the usage of :has(), it's all CSS powered. Don't miss the screen reader experience, it got some special attention, like usual.
Chapters:
- 0:00 - Introduction
- 0:20 - Tooltips vs Toggletips
- 2:22 - Feature Overview
- 6:25 - Screen Reader UX
- 9:06 - Accessibility Tree
- 14:12 - :has()
- 14:55 - HTML
- 15:18 - CSS
- 18:50 - JavaScript
- 20:21 - Outro
Resources:
- Try a demo → https://goo.gle/3SDW5YT
- Get the source → https://goo.gle/3SCNxBj
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs