I've been struggling to find a solution for this issue.
The structure I have is similar to the following. This excerpt represents just one out of five menu points, with normally five <li> items in the 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>
In my code snippet, you can see that within the <a> tag there's a span.tt acting as a tooltip.
I've created a live example of my code... feel free to check it out. http://jsfiddle.net/Ngjzk/1/
The issue at hand is aligning the tooltip centrally beneath the green button. Although the hover functionality works fine, the positioning of the blue tooltip is off to the right of the green button instead of being centered underneath it.
I currently have a workaround in the CSS section to align the tooltip but I would prefer not to use this method for each menu point. Since the tooltip text changes dynamically, it should always have the full width of the text and be centered underneath each button.
Do you have any suggestions on how to achieve this?
Thank you,