我想在悬停时实现一个工具提示,以引用文档前面的文本。 例如
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/