Question

I’d like to create simple tooltip in CSS3.

Example: http://jsfiddle.net/Cg2SX/

Example HTML (can be changed if necessary):

    <div class="icons">
        <a href="">t <span class="tooltip">Twitter</span></a>
        <a href="">f <span class="tooltip">Facebook</span></a>
        <a href="">g <span class="tooltip">Google+</span></a>
    </div>​

And CSS:

    .icons { position: absolute; left: 40px; top: 30px; }
    .icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
    .icons a:hover { text-decoration:none; }
    .tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }​

The problem is – I have no idea how to center tooltips below sharing icons (they will be font icons). It wouldn’t be complicated if I knew their width but I don’t.

Any ideas appreciated. Is it possible anyway?

Answer 1

You could try doing it like this:

updated fiddle

Using a fixed (big enough) width on the span, setting text-align: center on it & putting the text in a pseudo-element to which you give display: inline-block

HTML:

<div class="icons">
    <a href="#">t
        <span class="tooltip" data-text='Twitter'></span>
    </a>
    <a href="#">f
        <span class="tooltip" data-text="Facebook"></span>
    </a>
    <a href="#">g
        <span class="tooltip" data-text='Google+'></span>
    </a>
</div>​

Relevant CSS:

.icons a {
    display: inline-block;
    position: relative;
    margin-right: 70px;
    width: 16px;
    color: #000;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
.tooltip {
    position: absolute;
    bottom: -20px; left: 8px; /* half the width of link */
    margin-left: -35px;
    width: 70px;
    color: #fff;
    font: 10px Arial, sans-serif;
}
.tooltip:after {
    display: inline-block;
    padding: 2px 8px;
    background-color: green;
    content: attr(data-text);
}