Question

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

这是小提琴：https://jsfiddle.net/9xk2zvLy/10

小提琴中有两个工具提示，它们跟随链接的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

但是，我希望每个工具提示的左边框与段落的左边框对齐，其中包含所有相关链接。

这正是发生的事情，因为<span class="translation" />相对于<a>标记绝对定位。您的第二个<a>标记以C'était开头...在这种情况下是句子中间，所以这也是<span>翻译对齐的地方。

尝试设置display: table;

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

Answer 2

这里有一个带有CSS3示例的简单工具提示/气球，我在第二个链接中用左对齐零更新了它。希望这有帮助:)

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>

将工具提示与公共段落

2 个答案: