Featherweb Blog
Blog index
Image
Image by Bacila Ylad @ Unsplash
Sep 08, 2022
A pseudo modal
Trying to get rid of tooltips, I've been reading a lot about them and about the possible alternatives. What is often repeated is that tooltips are just a way of hiding content. In other words: rethink your way of writing and presenting. Already in 2018, Heydon Pickering wrote a brilliant (as usual) article: Your tooltips are bogus. It gets somewhat too technical for me towards the end, but it opened my eyes, hmm... four years later.In my last blog post, I managed to get the "details/summery" combo working, a "toggletip" to show or hide content. I very much liked this grassroots and svelte implementation and I started trying to rape restructure it. I could see this mechanism as the base for simple modals, sort of. Hours passed quickly, just playing.
Codepen to the rescue
But it wasn't until after a marathon web search, that I found this somewhat hidden jewel. From there on, we galloped towards the finish line! I simplified it and then, I simplified it some more, until it stopped working again ;) After another long search, this time Stackoverflow showed mercy with this pseudo developer: Hide arrow in <details>. What surprised me was that the original question was asked ELEVEN years ago. Wow, that's when I was still an adult!
Enough talk! Just show it.
Click/Tap-me
An epiphany
Bananas are the essence of creation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum bananas.
Massa enim nec dui nunc mattis enim. Ultrices gravida dictum fusce ut. Non curabitur gravida arcu ac tortor dignissim convallis. Aliquam ultrices sagittis orci a scelerisque purus semper. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi.
Hard to believe it can be this simple and fool-proof...
Just try it 😀
▵