如何为Python库列表实现支持鼠标悬浮与键盘聚焦的CSS工具提示

核心原因 #

你当前的:focus选择器不生效，本质是<span>元素默认不支持接收键盘焦点，只有链接、表单控件等原生交互元素才默认具备可聚焦属性，所以键盘操作时永远无法触发<span>的:focus状态。

修改方案 #

1. 调整CSS触发规则 #

把原来的tooltip触发选择器：

.set_of_libs span:hover span,
.set_of_libs span:focus span {
  display: inline;
}

修改为：

.set_of_libs span:hover span,
.set_of_libs span a:focus + span {
  display: inline;
}

这里利用相邻兄弟选择器+，当<a>标签被键盘聚焦时，直接选中它后面紧邻的tooltip span元素触发展示。

2. 补充无障碍属性 #

给每个tooltip的<span>加上role="tooltip"和唯一id，同时给对应的<a>标签加上aria-describedby属性关联tooltip的id，示例结构如下：

<li class="set_of_libs">
  Based on the <span>
    <a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook" aria-describedby="tip-1">jupyter/minimal-notebook</a>
    <span id="tip-1" role="tooltip">(Jupyter's minimal notebook)</span>
  </span> image.
</li>

修改后即可同时支持鼠标悬浮、键盘聚焦两种触发方式，同时屏幕阅读器也能正确识别链接对应的补充说明内容，符合无障碍规范。如果需要支持ESC键关闭tooltip，可以额外补充10行以内的JavaScript事件监听即可实现。

内容的提问来源于stack exchange，提问作者CodeGorilla