Tooltip CSS ONLY: focus and hover prevents access to following button

Question

http://codepen.io/anon/pen/wBaGgW

I currently have what a list of items and then a button next to them on the right:

The tooltip must appear on focus and the tooltip must appear on hover - this works but the problem is that when an item is focused (after clicking on it) - the following item cannot be accessed via mouse (because preceeding is item focused!):

The tooltip must disappear when the mouse over the tooltip itself, but the focus is forcing it stay.

The test-case is here: http://codepen.io/anon/pen/wBaGgW

can anyone offer a solution that does not have any javascript? Also, the html markup cannot be changed too much. Minimal changes to HTML are OK. Just trying to prevent too much as I'll most likely need to compensate other parts of the application to fit the html changes.

Here shows the tooltip:

button:hover>.tooltip,
button:focus>.tooltip,
button:active>.tooltip {
    visibility: visible;
    opacity: 1;
}

I can hide the tooltip doing the following:

button:focus>.tooltip:hover {
    visibility: hidden;
    opacity: 0;
}

But that causes a crazy flickering effect as the mouse moves within the area in which the tooltip would appear.

Keep in mind the restrictions:

• No JavaScript
• Compatibility with IE8+ (please note, the tooltip css is coming from our global module, and I dont have direct access to change it, I am working on a separate module that I can of course override because my css loads after the global css does)
• Tooltip must appear below (unfortunately)

Answer 1

With those restrictions, I don't know of any way to resolve your issue perfectly.

As a workaround, you can change the tooltip to be a sibling of the button, instead of a child and use the CSS adjacent sibling selector. This makes it so that when a user clicks the tooltip, it loses focus from the button and the tooltip is hidden. This will require you to fix the position of the tooltip a little (I used margin-top as a quick fix).

Code

button:hover + .tooltip,
button:focus + .tooltip,
button:active + .tooltip {
    visibility: visible;
    opacity: 1;
    margin-top:20px;
}

<ul>
  <li><span>Lorem Ipsum Dlar Set</span>
    <button>X
    </button>
    <span class="tooltip">Hello ToolTip
    </span>
  </li>
  ...
</ul>

Live example: http://codepen.io/anon/pen/azONYP