仅工具提示 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 作为快速修复）。

代码

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>

现场示例：http://codepen.io/anon/pen/azONYP

Answer 2

基于我的回答：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 是的

没有 Javascript 是的

必须低于 YEP

Answer 3

当鼠标离开提示框时，是否需要完全移除？ （比如删除“:focus”）...因为如果它允许工具提示在鼠标离开后再次可见，那么您可以使用：

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

使用<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>

Answer 5

尝试将您的 CSS 重构为如下内容：

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