body {
    padding: 30px;
    font: normal 12px/1.5 Arial, sans-serif;
    
}

/* Hover tooltips */
.field-tip {
    position: relative;
}

    .field-tip .tip-content {
        position: absolute;
        top: -22px; /* - top padding */
        right: 9999px;
        width: 300px;
        margin-right: -320px; /* width + left/right padding */
        padding: 10px;
        color: #fff;
        background: #333;
        -webkit-box-shadow: 2px 2px 5px #aaa;
        -moz-box-shadow: 2px 2px 5px #aaa;
        box-shadow: 2px 2px 5px #aaa;
        opacity: 0;
        -webkit-transition: opacity 250ms ease-out;
        -moz-transition: opacity 250ms ease-out;
        -ms-transition: opacity 250ms ease-out;
        -o-transition: opacity 250ms ease-out;
        transition: opacity 250ms ease-out;
    }
        /* <http://css-tricks.com/snippets/css/css-triangle/> */
        .field-tip .tip-content:before {
            content: ' '; /* Must have content to display */
            position: absolute;
            top: 10%;
            left: -16px; /* 2 x border width */
            width: 0;
            height: 0;
            margin-top: -8px; /* - border width */
            border: 8px solid transparent;
            border-right-color: #333;
        }

    .field-tip:hover .tip-content {
        right: -20px;
        opacity: 1;
    }