Purplecoat.js – Simple Labeled Overlays

I like when I'm on a run thinking about adding something to my website, and then I get home to find that very feature, nicely implemented, posted on HN! (Also, as a former English teacher, I can't resist pointing out a typo: "(Explanation: The value of deta-purplecoat-toggle must match the value of data-purplecoat to make this all work.)"

Very nice! Nicely presented as well ... and timely too, I was just thinking about something today this would be perfect for.

It seems like you could extend this to put more information on the coats. For example, I'd like to use one coat for help text and another to convey state changes. A data-purplecoat-class on the button (that then is applied to the generated div) could describe this easily enough ... in general, are you thinking of adding more power to what can be specified?

Nice effect! I really like the look of the Jekyll theme you made too, Shiori. Love the simplicity and use of Bootstrap.

Interesting! May I ask how you got the idea for this? I'm thinking about possible use cases :)

While this is fixable with the customization options, I find the readability in the demo lacking. The transparency, the color choices or some combination of both doesn't make it look nice to me. I like the simplicity of the solution though.

This is a great thing to have for CMSs. Clients often times don't understand what's `navigation.html` or `top header`, so this could aid in helping them to understand it. Good job!

This is awesome, Elle! Tell Shu I said hi! :)