使用纯JS的动态辅助工具提示

Question

我需要一些想法和指导来创建动态工具提示。 基本上，当键盘焦点到达特定组件时，工具提示就会被触发显示，触发时，工具提示将显示与this类似的内容。

焦点离开组件后，工具提示将不再存在，每当再次到达组件时，就会创建工具提示。

注意：这需要仅使用 JavaScript 来完成，HTML 代码必须保持不变，仅动态更改。

Answer 1

一般来说，工具提示不容易正确，我建议寻找另一种解决方案：

如果信息足够重要，需要作为工具提示或标题包含在内，请考虑将其包含在可见文本中。

– MDN

tooltip

角色

此外 GOV.UK 设计系统甚至没有工具提示组件，它是已知最容易访问的组件之一。

MDN 有一篇关于

tooltip

角色 的广泛文章，包括代码示例。

这些仍然具有以下缺点，如必需的 JavaScript 功能中所述：

• 可以使用 Escape 键隐藏工具提示
• 悬停时工具提示保持打开状态

我正在尝试至少为第一个问题提供一些 JS 解决方案：

const input = document.getElementById('password');
const tooltip = document.getElementById('passwordrules');

// hide tooltip on Escape
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    input.classList.add('hidetooltip');
  }
});

// Allow tooltip to be shown on next hover or focus
input.addEventListener('blur', _ => input.classList.remove('hidetooltip'));
input.addEventListener('mouseout', _ =>  input.classList.remove('hidetooltip'));

[role="tooltip"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"] {
  visibility: visible;
}

<label for="password">Password:</label>
<input aria-describedby="passwordrules" id="password" type="password" />
<div role="tooltip" id="passwordrules">
  <p>Password Rules:</p>
  <ul>
    <li>Minimum of 8 characters</li>
    <li>
      Include at least one lowercase letter, one uppercase letter, one number
      and one special character
    </li>
    <li>Unique to this website</li>
  </ul>
</div>

一般来说，如果您正在寻找有关可访问组件的指导，我建议您查看 ARIA 创作实践指南 (APG)。

不幸的是，工具提示模式还没有很好的记录。

“包容性组件”页面还对何时（不）使用工具提示以及对辅助技术的影响进行了一些讨论。那里的例子也缺乏上述功能。

Lion 白标 Web 组件提供了一个可访问的工具提示

，其中包括这些功能，也许看看他们的 JavaScript。