Tooltips

by secretgspot

HTML

<ol>
        <li>
            <b data-tooltip="Action Role-Playing">Dark Souls</b>
        </li>
        <li>
            <b data-tooltip="Sci-Fi Shooter">Gears of War 3</b>
        </li>
        <li>
            <b data-tooltip="Role-Playing">The Elder Scrolls V: Skyrim</b>
        </li>
        <li>
            <b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>
        </li>
        <li>
            <b data-tooltip="Soccer Sim">FIFA Soccer 12</b>
        </li>
        <li>
            <b data-tooltip="Rally / Offroad Racing">DiRT 3</b>
        </li>
        <li>
            <b data-tooltip="Adventure">L.A. Noire</b>
        </li>
        <li>
            <b data-tooltip="3D Platformer">Outland</b>
        </li>
        <li>
            <b data-tooltip="Action Role-Playing">Portal 2</b>
        </li>
        <li>
            <b data-tooltip="Beat-'Em-Up">The Dishwasher: Vampire Smile</b>
        </li>            
    </ol>

CSS

ol {
        margin: 0;
        *margin-left: 20px;
        padding: 0;
        list-style: decimal-leading-zero inside;
    }
    
    ol li {
        margin: 20px 0;
    }
    
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
    }
    
    .tooltip-content {
        opacity: 0;
        visibility: hidden;        
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;
        
        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));        
        -moz-box-shadow: 1px 1px 0 #555,
                    2px 2px 0 #555,
                    3px 3px 1px rgba(0, 0, 0, .3),
                    0     1px 0     rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                    2px 2px 0 #555,
                    3px 3px 1px rgba(0, 0, 0, .3),
                    0     1px 0     rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                    2px 2px 0 #555,
                    3px 3px 1px rgba(0, 0, 0, .3),
                    0     1px 0     rgba(255,255,255, .5) inset;                    
        -webkit-transition: bottom .2s ease, opacity .2s ease;
      ...

JavaScript

$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
    $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
});

if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
    $('.tooltip').mouseover(function() {
        $(this).children('.tooltip-content').css('visibility', 'visible');
    }).mouseout(function() {
        $(this).children('.tooltip-content').css('visibility', 'hidden');
    })
}