1

I am running into a weird issue when attempting to create a css-triggered tooltip that hovers over a link. From my understanding, a standard way to horizontally center an absolutely positioned object is:

parent { position: relative }
child  { position: absolute; left: 50%; transform: translateX(-50%) }

This works fine, but when the parent is an <a> tag with a line break in the text, the child is no longer centered.

Here is a jsfiddle example of what I am talking about

Notice in the example, hovering over the top link "text\nuneventext" will produce a tooltip slightly to the right of center.

Meanwhile, hovering over the bottom link "text" will produce a perfectly centered tooltip.

Does anyone know how to fix the centering of the tooltip for the multi-line <a> tag?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Phil Liu
  • 11
  • 2
  • works fine here on Firefox – dippas Feb 11 '16 at 17:27
  • 1
    @dippas I can see the problem using Chrome – Alon Eitan Feb 11 '16 at 17:28
  • Firefox seems to have a problem with the Y axis instead of the X axis; the uneventext tooltip is 1 line height higher than it should be on Firefox, while the X axis seems to be fine. On Chrome and IE11, the X axis is broken, but the Y axis is fine. – Phil Liu Feb 11 '16 at 17:31
  • possible doublicate http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div – solimanware Feb 11 '16 at 17:47
  • Definitely not a duplicate - see my solution below. I even included the "responsive solution" answer in your link in my original question. – Phil Liu Feb 11 '16 at 17:56

1 Answers1

0

I found a solution! By using an empty div as the "anchor" for the tooltip, the div will automatically occupy the maximum width of the parent, but the div itself will lie on a new line, which means its x position will not be offset by text. Then, if the tooltip-container div is a child element of the tooltip-anchor, we can horizontally center it using the traditional CSS3 method outlined above.

Here is a jsfiddle demonstrating the solution

Phil Liu
  • 11
  • 2