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.)"

Thank you! Fixed the typo :)

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.

Thank you so much!

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

I've used something like this for showing supplementary information when a user hovers over an image. Think Dribbble.

We're currently using something like this for in-app help on my company's SASS offering.

At the bottom of the page there is an example of using it to highlight the areas of the page the user can customize .

That example probably belongs near the top. It wasn't clear to me at all what the usecases were until I got to the end.

Thank you! I brought it closer to the top :) http://ellekasai.github.io/purplecoat.js/

Could also be useful for interactive walkthroughs of interfaces.

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.

Thank you for your feedback :)

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!