Badges CSS

by nhuon

HTML

<ul class="badge-list">
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10 points</div>
    </li>
    <li class="badge-list-item missing">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 20 points</div>
    </li>
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 30 points</div>
    </li>
    <li class="badge-list-item missing">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10 points</div>
    </li>
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10 points</div>
    </li>
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 30 points</div>
    </li>
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10 points</div>
    </li>
    <li class="badge-list-item missing">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10 points</div>
    </li>
    <li class="badge-list-item">
        <div class="badge-picture"></div>
        <div class="badge-title">Location Assistant</div>
        <div class="badge-tip">Add a location, it's simple. 10...

CSS

*
{
    font-family: Helvetica;
    font-size: 11px;
    padding: 0;
    margin: 0;
}

.badge-list
{
    width: 300px;
    list-style: none;
}

.badge-list-item
{
    float: left;
    display: inline-block;
    width: 70px;
    position: relative;
    padding: 5px;
}

.badge-picture
{
  background-color: #DDD;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  border: 1px solid #888;
}

.badge-title
{
    text-align: center;
}

.badge-tip
{
    display:none;
    position: absolute;
    border: 1px solid #888;
    top: 15px;
    left: 80px;
    width: 100px;
    padding: 10px;
    z-index: 2;
    background-color: #EEE;
}

.missing .badge-picture,
.missing .badge-title
{
    opacity: 0.3;
}

JavaScript

$(".badge-picture").hover(
function()
{
    $(this).siblings(".badge-tip").show();
},
function()
{
    $(this).siblings(".badge-tip").hide();
});
$(".badge-picture").mousemove(function(e)
{
    $(this).siblings(".badge-tip").offset({left:e.pageX + 10,top:e.pageY + 10})
});