html - 在没有脚本的情况下创建引用其他文本的 Vanilla 工具提示/弹出窗口

标签 html css

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

    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>可能是一个代码选项,但我不太确定什么是可能的,或者如何制定网络搜索的问题。

最佳答案

我会查看 aria-describedby,这样您就可以在考虑可访问性的情况下构建它。

The aria-describedby attribute is not used only for form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more.

此外,使用 role="tooltip",因为这正是您要构建的内容。

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

别处……

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

可以找到更多优秀的可访问工具提示示例 here .

关于html - 在没有脚本的情况下创建引用其他文本的 Vanilla 工具提示/弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55083894/

相关文章:

javascript - 尝试使用 subString 和 indexOf 从文本中获取 <img> 标签

css - 溢出-y空白空间错误?

html - 如何在 wordpress 网站上将 3 个服务框居中

css - 在页面底部设置页脚

html - 中心 div 位置

javascript - 如何使图像覆盖html中的完整部分

html - 如何在 bootstrap 中重新排列 div?

html - 具有固定标题的响应表

html - 将输入元素置于嵌套 div 的中心

html - <a href ="..."/> 的绝对路径是如何确定的?