Btukfyl

Is there a JavaScript library that, when the user holds down ctrl/alt, will display tooltips over elements on the page that have associated keyboard shortcuts (via an accesskey attribute) that use that key?
ctrl

This is what I was looking for: KeyCandy. Although I'll have to fix the flicker when Ctrl is held down.

I knew I'd seen something like this before. Not sure if it's the same one. Anyone got a better one?

I think KeyTips is the one I'd seen before. It's certainly looks better than KeyCandy, although I like how KeyCandy makes Ctrl the modifier for accesskeys.

Here's what it looks like:

There are some issues with browser reserved shortcuts but as this is an internal intranet site if I make it a hosted app for chrome it would be able to handle any shortcut

You don't require any library for keyboard shortcuts. Simply use the keys in the Object passed in the keydown object. For instance:

var element = document.querySelector("#element");

element.addEventListener("keydown", function (event) {

    //Ctrl+Alt+Del

    if (event.key === "Delete" && event.ctrlKey === true && event.altKey === true) {

        //Disables Ctrl+Alt+Del

        event.preventDefault();

        alert("You pressed Ctrl+Alt+Del, too bad!");

    }

    //Win+R (On Windows, it opens up the Run Prompt)

    else if (event.key === "r" && event.metaKey === true) {

        //Disable it once again

        event.preventDefault();

        alert("You can never 'run' from me!!");

    }

    //Create A Save Prompt When Users Ctrl+S

    else if (event.key === "s" && event.ctrlKey === true) {

        event.preventDefault();

        //Give The User Options

        alert("First choose an option to save, then continue.");

    }

});

And then, from there, simply add the title attribute to the element, to create a browser generated tooltip, and simply focus() on the element when the shortcut is pressed.

JavaScript:

var element = document.querySelector("#element");



if (event.key === "h" && event.ctrlKey === true) {

    event.preventDefault();

    element.focus();

}

HTML:

<p title="help section" id="element">Help Help Help<p>

Hope that helps!