How to make a span tag to be centered from it's current elemental ( Like Youtube share button )

Question

I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.

The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.

I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.

I have come this far, see: http://jsfiddle.net/Kz2n2/

Answer 1

try this:

<a href="#" title="share this" class="tooltip"><span title="share">share</span></a>

css:

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100%;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

working jsfiddle: demo

Answer 2

With jQuery UI Tooltip you can make tooltips for your social icons.

Check out the following example, here is the jQuery UI Tooltip implemented.

$('.tooltip').tooltip();

The title tag on your <a href='#'>` is used as the text for your tooltip.

<a href="#.php" class="tooltip" title="RSS">#<span>RSS.</span></a>