仅提供工具提示CSS：焦点和悬停可防止访问以下按钮

Question

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

我目前有一个项目列表，然后是右边的一个按钮：

工具提示必须出现在focus上且工具提示必须出现在hover上 - 这样可行，但问题是当项目聚焦时（点击后） - 无法访问以下项目通过鼠标（因为前面是项目聚焦！）：

当鼠标悬停在工具提示本身上时，工具提示必须消失，但重点是强制它停留。

测试用例在这里：http://codepen.io/anon/pen/wBaGgW

任何人都可以提供没有任何JavaScript的解决方案吗？另外，html标记不能改变太多。对HTML的最小更改是可以的。只是试图防止太多，因为我很可能需要补偿应用程序的其他部分以适应html更改。

此处显示工具提示：

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

我可以隐藏工具提示，执行以下操作：

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

但是，当鼠标在工具提示出现的区域内移动时，会导致疯狂的闪烁效果。

请记住限制：

• 没有JavaScript
• 与IE8 + 的兼容性（请注意，工具提示css来自我们的全局模块，我没有直接访问权限更改它，我正在处理一个单独的模块，我当然可以覆盖，因为我的css加载在全球css之后）
• 工具提示必须出现在下方（不幸的是）

Answer 1

有了这些限制，我就不知道如何完美地解决您的问题。

作为一种变通方法，您可以将工具提示更改为按钮的兄弟，而不是子项，并使用CSS相邻的兄弟选择器。这使得当用户单击工具提示时，它会从按钮失去焦点并隐藏工具提示。这将要求您稍微修改工具提示的位置（我使用margin-top作为快速修复）。

HTML

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

CSS

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

实例：http://codepen.io/anon/pen/azONYP

Answer 2

当鼠标离开工具提示时，需要将其完全删除吗？ （比如删除＆＃34;：焦点＆＃34;）...如果它允许在鼠标离开后再次显示工具提示，那么你可以使用：

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 3

根据我的回答：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;
}

以下是Fiddle

<强>更新 现在关注焦点。 添加了指针事件：无;

IE8 YEP YEP

没有Javascript YEP

必须低于YEP

Answer 4

尝试将CS​​S重构为以下内容：

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

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

Answer 5

使用<a>代替按钮并将其设置为按钮。

/* `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>