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

Question

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

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
...

I希望在文本中的链接上悬停时附加显示注释的文本。

我不想通过title，data-title，div在文本中重复笔记。。对于css3 / html5 /纯js，是否有一种简单的方法可以做到这一点？

Answer 1

这应该能满足你的需要：

​

const toolTipHover=ev=>{
 const tt=document.getElementById("tooltip");
 if(ev.type=="mouseover") {
  if(ev.target.tagName=="A"){
   let href=ev.target.getAttribute("href");
   if (href.length>1 && href.slice(0,2)=="#n") { //  only for internal links ...
    let a=document.querySelector("[name="+href.substr(1)+"]")
    if (a) { // and only if these are actually found on the page
     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.offsetHeight
       : ev.pageY+15)+"px";
    }
   }
  }
 } else {
  tt.style.left="-1000px";  
 }
} 
["mouseover","mouseout"].map(ev=>document.body.addEventListener(ev,toolTipHover));

.space{height:100px}
#tooltip {position:absolute; width:200px; left:-1000px;
          background-color: #fff;
          padding:6px; border:1px solid gray}

<pre>
book text<a href="#n1" name="r1">[1]</a> book text.
     Here is an external <a href="https://google.com">link</a> that should not fire.
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..
<div class="space"></div>
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
<div class="space"></div>
<div class="space"></div>
Here is some more Text to demonstrate what happens border cases <a href="#n3" name="r3">[3]</a>. And some more text.
<a href="#">back to the top</> this link should not fire ...
</pre>
<div id="tooltip"></div>

​

我在position:absolute中添加了一个div。它的初始位置离开屏幕(左边1000像素)。每当鼠标移动到A标记上时，hover()事件函数就会执行以下操作：

• 当事件是"mouseover“时，它将搜索相应的便笺文本，将其放在工具提示中，并将工具提示div定位到当前鼠标位置附近。
• 如果事件是“鼠标输出”，那么工具提示div的位置将再次从屏幕上启动。

在我的片段中，我使用.nextSibling查找下一个文本节点。这对于给出的样本数据是有效的，但是如果脚注稍长一些，并且包含其他HTML元素，如span或链接，则不会有太大帮助。对于实际的脚注文本，最好在脚注-<a>之后使用<p>或<div>元素。然后，通过使用nextElementSibling可以更可靠地找到这些元素(请参阅这里以获得进一步的参考)。

在查看OP的“小提琴”之后，我更改了代码片段，并将其用于垂直定位，如下所示：

tt.style.top = (ev.pageY+15 > window.pageYOffset+window.innerHeight-tt.offsetHeight 
       ? ev.pageY-tt.offsetHeight
       : ev.pageY+15)+"px";

我还用叉子拨弄小提琴，见这里。

Answer 2

如果您可以在项目中使用库，我建议使用Tippy.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
    });

}

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