
.tooltip {
    position: relative;
}


.tooltip > .content {
    position: absolute;
    z-index: 1000;
    width: 250px;
    right: 0px;
    top: 20px;
    
    padding: 8px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 1.0);
    background: rgba(0, 0, 0, 0.9);
    
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);
    font-size: 13px;
    
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
       -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 1.0);
    
    opacity: 0.0;
    -webkit-transition: opacity 0.3s ease-in-out;
       -moz-transition: opacity 0.3s ease-in-out;
            transition: opacity 0.3s ease-in-out;
}


.tooltip:hover > .content {
    position: absolute;
    opacity: 1.0;
}


.tooltip > .content strong {
    font-weight: bold;
}



.tooltip.onLeft > .content { left: -10000px; top: 0px; }
.tooltip.onLeft:hover > .content { left: -300px; top: 0px; }

.tooltip.onRight > .content { left: -10000px; top: 0px; }
.tooltip.onRight:hover > .content { left: 100%; top: 0px; }

.tooltip.onBottom > .content { left: -10000px; top: 120%; }
.tooltip.onBottom:hover > .content { left: 0px; top: 120%; }
