Javascript 如何在工具提示中显示html书籍中的注释？

在本书的文本中，链接到注释。笔记在书的底部

book text<a href="#n1" name="r1">[1]</a> book text 
book text text<a href="#n2" name="r2">[2]</a> book text 
book text book text<a href="#n3" name="r3">[3]</a> book text..

Notes:
<a name="n1" href="#r1">1</a> Here is the text of note 1
<a name="n2" href="#r2">2</a> Here is the text of note 2
<a name="n3" href="#r3">3</a> Here is the text of note 3
...

书籍文本书籍文本
图书文本图书文本
书本文本书本文本书本文本。。
笔记：
以下是注1的案文
以下是注2的案文
以下是注3的案文
...

我希望当鼠标悬停在文本中的链接上时，可以额外显示注释的文本。

---

我不想通过

title

，

data title

，

div

复制文本中的注释。使用css3/html5/pure js是否有一种简单的方法可以做到这一点？

如果您可以在项目中使用库，我建议您使用或类似的方法

在您的例子中，我会将类添加到链接中，并注意标记，以便于使用JavaScript，结果如下：

book text<a href="#n1" name="r1" class="reference">[1]</a> book text 
book text text<a href="#n2" name="r2" class="reference">[2]</a> book text 
book text book text<a href="#n3" name="r3" class="reference">[3]</a> book text..

书籍文本书籍文本
图书文本图书文本
书本文本书本文本书本文本。。

对于注释，我也会将整个文本放在标签中，以便于从每个标签中提取文本：

<a name="n1" href="#r1" class="referencedNote">1 Here is the text of note 1</a>
<a name="n2" href="#r2" class="referencedNote">2 Here is the text of note 2</a> 
<a name="n3" href="#r3" class="referencedNote">3 Here is the text of note 3</a>

现在，如果每个引用只有一个referencedNote，您可以轻松地循环使用它们并为工具提示初始化Tippy.js：

let references = document.getElementsByClassName("reference");
let referencedNotes = document.getElementsByClassName("referencedNote");

for(i = 0; i < references.length; i++){

    tippy(references[i], {
      content: referencedNotes[i].innerHTML
    });

}

let references=document.getElementsByClassName（“reference”）；
让referencedNotes=document.getElementsByClassName（“referencedNotes”）；
对于（i=0；i

---

这就是我要做的，我希望它也能满足您的需要。

如果您可以在项目中使用库，我建议您使用或类似的工具

在您的例子中，我会将类添加到链接中，并注意标记，以便于使用JavaScript，结果如下：

book text<a href="#n1" name="r1" class="reference">[1]</a> book text 
book text text<a href="#n2" name="r2" class="reference">[2]</a> book text 
book text book text<a href="#n3" name="r3" class="reference">[3]</a> book text..

书籍文本书籍文本
图书文本图书文本
书本文本书本文本书本文本。。

对于注释，我也会将整个文本放在标签中，以便于从每个标签中提取文本：

<a name="n1" href="#r1" class="referencedNote">1 Here is the text of note 1</a>
<a name="n2" href="#r2" class="referencedNote">2 Here is the text of note 2</a> 
<a name="n3" href="#r3" class="referencedNote">3 Here is the text of note 3</a>

现在，如果每个引用只有一个referencedNote，您可以轻松地循环使用它们并为工具提示初始化Tippy.js：

let references = document.getElementsByClassName("reference");
let referencedNotes = document.getElementsByClassName("referencedNote");

for(i = 0; i < references.length; i++){

    tippy(references[i], {
      content: referencedNotes[i].innerHTML
    });

}

let references=document.getElementsByClassName（“reference”）；
让referencedNotes=document.getElementsByClassName（“referencedNotes”）；
对于（i=0；i

---

我会这样做，我希望它也能满足您的需要。

这应该可以满足您的需要：

const-toolTipHover=ev=>{
const tt=document.getElementById（“工具提示”）；
如果（ev.type==“鼠标悬停”）{
如果（ev.target.tagName==“A”）{
让href=ev.target.getAttribute（“href”）；
如果（href.length>1&&href.slice（0,2）=“#n”）{//仅适用于内部链接。。。
设a=document.querySelector（“[name=“+href.substr（1）+”]”）
如果（a）{//，且仅当在页面上实际找到这些
tt.innerHTML=a.textContent+“：”+a.nextSibling.textContent
tt.style.left=Math.min（ev.pageX，window.pageXOffset+window.innerWidth tt.offsetWidth）+“px”；
tt.style.top=（ev.pageY+15>window.pageYOffset+window.innerHeight-tt.offsetHeight
？ev.pageY-tt.离视
：ev.pageY+15）+“px”；
}
}
}
}否则{
tt.style.left=“-1000px”；
}
} 
[“mouseover”，“mouseout”].map（ev=>document.body.addEventListener（ev，toolTipHover））
.space{height:100px}
#工具提示{位置：绝对；宽度：200px；左侧：-1000px；
背景色：#fff；
填充：6px；边框：1px实心灰色}

书文本书文本。
这是一个不应该开火的外部设备。
图书文本图书文本
书本文本书本文本书本文本。。
笔记：
以下是注1的案文
以下是注2的案文
以下是注3的案文
这里有更多的文本来演示在边界情况下会发生什么。还有一些文字。
返回顶部此链接不应触发。。。
这应该可以满足您的需要：


const-toolTipHover=ev=>{
const tt=document.getElementById（“工具提示”）；
如果（ev.type==“鼠标悬停”）{
如果（ev.target.tagName==“A”）{
让href=ev.target.getAttribute（“href”）；
如果（href.length>1&&href.slice（0,2）=“#n”）{//仅适用于内部链接。。。
设a=document.querySelector（“[name=“+href.substr（1）+”]”）
如果（a）{//，且仅当在页面上实际找到这些
tt.innerHTML=a.textContent+“：”+a.nextSibling.textContent
tt.style.left=Math.min（ev.pageX，window.pageXOffset+window.innerWidth tt.offsetWidth）+“px”；
tt.style.top=（ev.pageY+15>window.pageYOffset+window.innerHeight-tt.offsetHeight
？ev.pageY-tt.离视
：ev.pageY+15）+“px”；
}
}
}
}否则{
tt.style.left=“-1000px”；
}
} 
[“mouseover”，“mouseout”].map（ev=>document.body.addEventListener（ev，toolTipHover））
.space{height:100px}
#工具提示{位置：绝对；宽度：200px；左侧：-1000px；
背景色：#fff；
填充：6px；边框：1px实心灰色}

书文本书文本。
这是一个不应该开火的外部设备。
图书文本图书文本
书本文本书本文本书本文本。。
笔记：
以下是注1的案文
以下是注2的案文
以下是注3的案文
这里有更多的文本来演示在边界情况下会发生什么。还有一些文字。
返回顶部此链接不应触发。。。
谢谢你。但不完全是我需要的。在浏览器中本地阅读的书籍，无需互联网连接。建议将脚本放在页面正文中。谢谢etlaM。但不完全是我需要的。在浏览器中本地阅读的书籍，无需互联网连接。建议将脚本放在页面正文中。谢谢。很好。但是如果链接位于页面的右边缘，则工具提示不完全可见，并显示水平滚动。内容提示宽度是否可能？该脚本在IE 11.0中不起作用。船尾