我有一个页面显示了一个故事，按钮从第1页到第2页和第3页，反之亦然，故事是在一个数组的位置，我已经用一个字符的长度来填充每一页。 我在每一页的段落后面附加的文本包含标签。 我试图添加工具提示的每一位我已经放置在粗体标签。 我试图得到所有的页面，记录x和y的位置，然后创建一个元素的文本，这是每个元素所需要的。 下面是我的代码的示例
pageItemsArray = [
['The <b>car</b> is a round <b>tree</b>.']
['make: rennault', 'name: oak']
]
html:
<p class="insertStoryPageHere"><p>
JavaScript:
for(i=0; i<document.getElementsByTagName("b").length; i++) {
/*run code for all tooltips here*/
element = document.createElement("SPAN");
element.innerHTML = pageItemsArray[1][i].toString();
element.setAttribute("class", "tooltip");
document.body.appendChild(element);
x = document.getElementsByTagName("b")[i].offsetLeft;
y = document.getElementsByTagName("b")[i].offsetTop;
element.setAttribute("left", x);
element.setAttribute("top", y);
}
然而，跨距位于页面的底部，而不是任何靠近其预定位置的地方。
这里有一个快速而肮脏的仅CSS解决方案。 我只是用一些文本向添加了一个tooltip属性（不过与您的数组略有不同）。 这应该能给你一些方向。 不需要一个复杂的建设与记忆的位置和什么都不。 把事情简单化，把头疼的事情留给真正困难的事情。
null
body { margin: 0; padding: 5rem } /* some spacing */
p { position: relative } /* creat a stacking context */
b:hover[tooltip]:before {
content: attr(tooltip);
position: absolute;
/* position within parent stacking context (the <p>, default is <body>) */
top: -2.5rem;
padding: 0.5rem;
background-color: black; color: white;
}<p>this is a text about <b tooltip="car brand">Renault</b> and how you can keep it running for <b tooltip="unit of time">years</b>