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

Answer 2

Based my answer on this: Answer

html <button tooltip="Tooltip text">Test</buttoN>

css

[tooltip]:before {            
    position : absolute;
    content : attr(tooltip);
    pacity : 0;
}

[tooltip]:hover:before {        
    opacity : 1;
    margin-top:10px;
}

Here is the Fiddle

Update Fiddle now with focus. Added pointer event: none;

IE8 YEP YEP

No Javascript YEP

Must be below YEP

Answer 3

when mouse leave the tooltip, it's needs to be removed completely? (like removing the ":focus")...beacuse if it's allow for the tooltip to be visible again after mouse leave so you can use:

button:focus>.tooltip:hover
{
  background: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-indent: -9999px;
}

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

Answer 4

Try refactoring your CSS to something like this:

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

Answer 5

Use <a> instead of buttons and style them as buttons.

/* `border-box`... ALL THE THINGS! */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

header,
.demo,
.demo p {
  margin: 4em 0;
  text-align: center;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  top: 150%;
  left: 50%;
  margin-top: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  top: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/* Show tooltip content on focus */
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h1>CSS Simple Tooltip</h1>


<div class="demo">
  <p><a href="#" class="btn btn-primary" data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</a></p>
</div>