Tooltips using only CSS

Question

I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.

The above image is what I am trying to get at. I've tried keeping the width:auto but it's not working either.

Answer 1

body
{overflow-x:hidden;}

div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}

a
{position:relative;white-space:nowrap;}

a > span.tooltip
{
    position: absolute;
    white-space: normal;
    width: 100%;
    top: 130%;
    left: 0;
}

a > span.tooltip > span
{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    left: -500%;
    width: 1100%;
}

a > span.tooltip > span > span
{
    display: inline-block;
    background: black;
    border-radius: 4px;
    padding: 10px;
    color: white;
    max-width: 300px;
}

DEMO: http://jsfiddle.net/b2Yqf/

works on msie 7 8 9 10, firefox, chrome

not what you might want... since markup is made with three nested <span>s... but YES. it could be done!

Answer 2

The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by @robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.

EDIT1: Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.