mousetip | Dynamic Keyboard Shortcut Tooltips | Keyboard library

Head over to http://craig.is/killing/mice and check out the documentation for Mousetrap. Include Mousetip on your page before the closing </body> tag. If you're using the built in UI library, including the following after mousetip.js. The css is included in ./examples/css/mousetip.css. Add some keyboard events to listen for and add a description for the action.
Head over to http://craig.is/killing/mice and check out the documentation for Mousetrap
Include Mousetip on your page before the closing </body> tag <script src="/path/to/mousetip.js"></script>
If you're using the built in UI library, including the following after mousetip.js. The css is included in ./examples/css/mousetip.css <script src="path/to/mousetip.ui.js"></script>
Add some keyboard events to listen for and add a description for the action <script> // single key example Mousetip.bindKey("a", "Change background color to yellow", function(e, combo) { $('body').css('background-color', 'yellow'); }); // shift + single key example bound to uppercase value Mousetip.bindKey("A", "Insert the text 'hello world' into div", function(e, combo) { $("#container").text("hello world"); }); // meta key example Mousetip.bindKey("meta+shift+e", "Change background color to red", function(e, combo) { $('body').css('background-color', 'red'); }); // another meta key example with longer description Mousetip.bindKey("meta+shift+v", "You can only bind one non-modifier key when the meta key is part of the combination.", function(e, combo) { $("#container").text(combo); }); // taking focus away from the window with an alert message Mousetip.bindKey("ctrl+k+v", "Alert message", function() { alert("Alert message"); }); // simple console message Mousetip.bindKey("ctrl+i", "Console message", function(e, combo) { console.log(combo); }); // alt key example Mousetip.bindKey("meta+alt+.", "Change background color to blue", function(e, combo) { $('body').css('background-color', 'blue'); }); // option key example Mousetip.bindKey("meta+option+2", "Change background color to green", function(e, combo) { $('body').css('background-color', 'green'); }); // invalid binding Mousetip.bindKey("ctrl+M", "If you'd like to bind an uppercase letter, you can only do it with a shift+lowercase when there is a modifier involved", function(e, combo) { console.log("This will never execute"); }); // binding the tooltip toggle to a combination Mousetip.bindKey("ctrl+t", "Toggle mousetip", function(e, combo) { Mousetip.toggle(function(power) { MousetipUI.toggle(power); }); }); // binding the tooltip output to the UI library // you can use any tooltip library you'd like Mousetip.bindTooltip(function(shortcuts, e) { MousetipUI.tip(shortcuts); }); </script>