ccampbell/mousetrap — pull request #82 by Sveder (2012-12-28 20:46:47+00:00)
Title: Adding Auto-Generated Help Lightbox on ? Press

I've added an awesome feature that automatically creates a lightbox with the keyboard shortcuts currently registered and is bound to ?. It looks pretty much the same as gmail's lightbox.

![lightbox_screenshot](https://f.cloud.github.com/assets/888366/34647/9d384b84-512f-11e2-8ec9-9152a8aa8ff9.png)

I've basically added a few "public" methods to show, hide and toggle this help and bound ? on start and on reset. A user can still override it. I achieve this by injecting the CSS (only if invoked) to the start of the head declaration and than injecting a div that implements a simple lightbox with a title and div table. The lightbox shows all the shortcuts, and if available an explanation, which is either specified by a new fourth argument to bind (ye, kinda hacky I know) or if none taking the name of the callback function.

The CSS is injected to be the first child of the head directive to allow people to override the styling of the lightbox and all the other elements. Basic documentation for this is here:
https://github.com/Sveder/mousetrap/wiki/Help-Overlay-CSS-Style-Overriding