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

Posted 2023-02-22

【中文标题】仅工具提示 CSS：焦点和悬停可防止访问以下按钮

【英文标题】：Tooltip CSS ONLY: focus and hover prevents access to following button

【发布时间】：2015-01-22 16:07:50

【问题描述】：

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 之后）

工具提示必须出现在下方（很遗憾）

【问题讨论】：

让它悬停在对象的右侧怎么样？

@LOTUSMS 我不能这样做，因为它违背了业务需求。它还增加了复杂性（响应式网络、工具提示在屏幕外不可见等）

pointer-events css 属性也可以让点击通过工具提示，但 IE8 和 IE9 不支持。

没有充分的理由拒绝我的问题，因为它太具有挑战性或限制性。我提供了 codepen、代码和整个场景。我花了相当长的时间来提出这个问题。

我有一个半修复。如果一个按钮被聚焦，并且用户点击了工具提示，它就会被关闭。如果用户没有任何焦点，它也会在悬停时被解除。 codepen.io/anon/pen/azONYP

【参考方案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

【讨论】：

感谢 Marcelo，这真的很接近。我会试一试，看看我能不能让它完美地工作:)

【参考方案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

【讨论】：

感谢发帖.. 遗憾的是还有很多闪烁，如果您将鼠标缓慢向下移动，可能会出现大量闪烁。鼠标也位于按钮的左侧，闪烁。

我在 firefox 34.0 和 chrome 39 中测试过。 这里没有闪烁。我在 linux 上，所以我无法在 Internet Explorer 上进行测试。你在用什么？

chrome 39, windows 7x64 - 可以在我的 Mac 上试用。但无论如何，我们有严格的要求，必须兼容 windows 和 mac、chrome、firefox、safari、ie8-11(argh)

在此解决方案中，工具提示不会出现在焦点上。这就是使这个问题变得困难的原因。

重点更新。当我悬停时，我认为这是给定的。无论如何添加了 poiunter-events: none on the hvoer 所以应该没有闪烁

【参考方案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

【讨论】：

非常接近！但它并不是 100% 正确的。工具提示也必须重新出现。不过，这似乎很有希望。

它重新出现，你的意思是它不需要重新出现（完全删除）？

@Eran 我认为他的意思是，当您专注于一个按钮然后将鼠标悬停在其工具提示上时，它会隐藏并显示下方的按钮，但现在显示的第二个按钮没有在悬停时显示其工具提示。

【参考方案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>

【参考方案5】：

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

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

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

【讨论】：

感谢您的尝试！这不起作用（即使在 chrome 中也不行） - 请参阅代码笔：codepen.io/anon/pen/wBaGgW - 我会看看大纲的作用（会检查出来）

你是对的。它适用于 Firefox，但您的问题暗示 IE8+。回到绘图板...