Question

I’m just not able to find a solution to this.
I have the following structure. This is just one of five menupoints – so normally there are five <li> items ins this ul.

<nav id="loggedInMenu">
    <ul role="navigation">
         <li>
            <a class="homeBtn" href="/my">
                <span class="homeBtnTooltip btn tt" title="Homepage">Homepage</span>
            </a>
         </li>
    </ul>
</nav>

As you can see withing my <a> I have a span.tt as a tooltip.
I made a live example of my code … check it out. http://jsfiddle.net/Ngjzk/1/

So normally the tootlip is hidden and is only shown when I hover over the green btn itself. However this is not the problem, this just works fine.

I simply have no clue how I can manage to align the tooltip itself centrally underneath the green btn.

So right now as you can see the blue tooltip is way to far right underneath the green btn. It should be aligned centally underneath the button.

I commented my little “hack” to do so out right now in the css section. Uncomment the last lines in the css to see what I’m aiming for.

However I don’t want to have this weird hack and position each tooltip for each menupoint with a negative margin-left. Especially because the text for the tooltips is changed dynamically, so the tooltip should always have the full width of the text and be aligned centrally underneath each button.

Any idea how to so so?

Thank you

Answer 1

edit [pushed correct answer to the top and history of this answer to the end]

Ok, you must use two-fold position; first (outer span, position absolute; left: 50%) and second (inner span, position relative; left: -50%)

http://jsfiddle.net/HerrSerker/Ngjzk/10/

---

original
Try a ‘dynamic’ percentual negative margin-left

#menu .tt {
  text-align: center;
  position: absolute;
  top: 38px;
  margin-left: -50%;
}

---

edit
If you can rearrange your HTML, try the span outside of the a
http://jsfiddle.net/HerrSerker/Ngjzk/5/