Featherweb Blog

Blog index


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.


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 😀

Feedback ⇆