创建无需其他脚本即可引用其他文本的原始工具提示/弹出窗口

Question

我想在悬停上实现一个工具提示，以在文档的前面引用文本。 例如

    1. blah blah blah
    2. more blah
    .
    . Hella blah
    .
    Way down somewhere in the page
    ... 

    "So as referenced in the first example ....."

我想创建一个弹出框或工具提示，向读者显示<1. blah blah blah>，因此 他们不必向上滚动页面即可获取信息。

大多数用于创建工具提示的示例都假定文本在工具提示中。

是否可以按照我的想法实施悬停工具提示/弹出窗口？

我以为<a href="#first">1. blah blah blah</a>可能是一个代码选项，但是我不太确定有什么可能，或者如何提出网络搜索的问题。

Answer 1

我会研究aria-describedby，以便您在牢记可访问性的基础上进行构建。

  

aria- describeby属性不仅用于表单元素，还用于其他元素。它   还用于将静态文本与小部件，   元素，窗格，具有标题，定义等的区域。

另外，请使用role="tooltip"，因为这正是您要构建的。

<span aria-describedby="tip1Text" role="tooltip"></span>

在其他地方…

<div class="visually-hidden" id="tip1Text">Tooltip text goes here.</div>

here中提供了更多出色的易用工具提示示例。