javascript - 将工具提示与公共(public)段落的左边距对齐

Question

我有 CSS3 定义的工具提示，其形式为 <a><span class="tooltip">tooltip text</span>link text</a> 。当指针悬停在链接上时，会显示一个工具提示，相对于相应链接的开头放置。不过，我希望每个工具提示的左边框与段落的左边框对齐，该段落包含所有相关链接。

这是 fiddle :https://jsfiddle.net/9xk2zvLy/10

fiddle 中有两个工具提示，它们遵循链接的 y 位置，正如它们应该的那样。然而，它们也有不同的 x 位置。我希望两者都与段落水平对齐。

可以用javascript来完成吗？我尝试了以下方法:

  for(var i = 0; i < balloons.length; ++i) {
      var b = balloons[i];
      b.style.left = -b.parentNode.offsetLeft + "px";
  }

以及不同的变体； b是span与工具提示。奇怪的是，某些变体有时似乎有效，即工具提示恰好出现在它应该出现的位置，但只是偶尔。

Answer 1

I would like, though, the left border of each tooltip to be aligned with the left border of the paragraph, which contains all of the links in question.

这正是正在发生的事情，因为您有 <span class="translation" />相对于 <a> 绝对定位标签。你的第二个<a>标签以 C'était 开头...在本例中是句子中间，所以这就是 <span> 的位置。翻译也对齐。

尝试设置display: table;

a.tooltip:hover .translation {
    display: table;
    opacity: 1.0;
    visibility: visible;
}