将工具提示与公共段落的左边距对齐

Question

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

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

fiddle 中有两个工具提示，它们应该跟随 link 的 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

这是一个带有 CSS3 示例的简单工具提示/气球，我在第二个 link 中将其更新为左对齐零。希望这会有所帮助:)

http://jsfiddle.net/mkoL8q5z
http://jsfiddle.net/mkoL8q5z/1/

<div title="Tooltip text for first div"></div>
<div title="Tooltip text for second div"></div>

<style>
body{
padding:60px;
}

div{
width:20px;
height:31px;
background:red;
float:left;
margin:0 0 0 20px;
}

div:before{
content:attr(title);
display:none;
}

div:hover{
z-index:10;
position:relative;
}

div:hover::before{
width:200px;
display:block;
background:yellow;
border:1px solid black;
padding:8px;
margin:25px 0 0 0px;
}
</style>

Answer 2

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;
}

将工具提示与公共段落的左边距对齐

Align tooltips to the left margin of a common paragraph

javascript

css

tooltip