Tooltip only working on certain part of href

I am trying to implement some simple tooltip (TipTip) effect, but for some weird reason i cannot get it to work:

http://basenharald.nl/3d/ Click on pssst, there you will see some social icons. I am trying to create a tooltip on the facebook icon. Wrapped a href around it (gave it a red border for testing). Now when i hover the href the tooltip will only appear on the bottom part of the href element.

I cannot see why it does this. since the border clearly indicates that the href is fully wrapped around the icon.

Some help would be appreciated. So开发者_开发百科 far i tried to set: height, z-index, display:block (makes the layout fall apart), float. Nothing seems to work.

Furthermore. I want the tooltip to apear on the bottom. This works fine as long as i do not scroll to the right. When scrolled to the right it apears on the left and the layout breaks.

Thanks in advance!

You have a div with class="tab" that overlays (z-index: 999) your panel.