How can I make Tab-key navigation work with popups?

Question

I'm struggling with making a navigation keyboard-accessible, so that the user can Tab through the links. The problem is with popups that will be shown next to a menu item once it is focused or hovered. Here's a minimal working example:

a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}

<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>

In Firefox 45, when Focus is on "Edit" and its "(Help)" is visible, the next Tab will not focus anything, but the "(Help)" vanishes. The next Tab will then move to "Delete".

In Chrome 49, it's even worse. When focus is on "Edit", the next Tab will not focus anything, and in fact restart the navigation at the page's first link upon the next Tab.

Is there any way that I can make this work while retaining the general style and document structure?

Answer 1

I just saw how they do stuff like this in the YAML CSS framework. They don't mess with display (or visibility, for that matter) and just move the element out of the viewport:

a.help {
    /* don't show help until explicitly triggered */
    position: relative;
    left: -32768px;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    left: 0;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    left: 0;
}

<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>