CODEWITHSUNDEEP
cssinternet-explorer-8
docodemore
docodemore

Reputation: 1074

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

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

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

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!):

enter image description here

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:

Upvotes: 6

Views: 12132

Answers (5)

fictus
fictus

Reputation: 286

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;
}

Upvotes: 0

Marcelo
Marcelo

Reputation: 4425

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

Upvotes: 5

Worthy7
Worthy7

Reputation: 1561

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>

Upvotes: 0

Persijn
Persijn

Reputation: 14990

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

Upvotes: 3

Eran.E
Eran.E

Reputation: 940

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

Upvotes: 2

Related Questions