Align tooltips to the left margin of a common paragraph

Question

I have CSS3-defined tooltips of the form <a><span class="tooltip">tooltip text</span>link text</a>. When the pointer hovers over the link, a tooltips shows, placed relatively to the beginning of a respective link. 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.

Here is the fiddle: https://jsfiddle.net/9xk2zvLy/10

There are two tooltips in the fiddle, which follow y positions of the links, as they should. Yet, they also have different x positions. I would like both to be horizontally aligned with the paragraph.

Can it be done using javascript? I tried the following:

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

and different variations; b is the span with the tooltip. Strangely, some of the variations seemed to work sometimes, i.e. the tooltip appeared exactly where it should, yet only occasionally.

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.

This is exactly what is happening, since you have the <span class="translation" /> absolutely positioned relative to the <a> tag. Your second <a> tag starts with C'était... and in this case mid sentence so this is where the <span> translation aligns too.

Try setting display: table;

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