.check-ok,
.check-error,
.check-warning {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
}

.check-ok {
    background: url(images/tick-circle-blue.png) no-repeat;
}

.check-error {
    background: url(images/cross-circle.png) no-repeat;
}

.check-warning {
    background: url(images/exclamation-diamond.png) no-repeat;
}

span.relative {
    position: relative;
}

span.relative > .check-ok,
span.relative > .check-error,
span.relative > .check-warning {
    margin-top: -38px;
    left: -6px;
}



.error {
    position: absolute;
    z-index: 1;
    line-height: 14px;
    font-size: 11px;
    display: none;
    min-width: 150px!important;
    padding: 3px 8px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    background-color: red;
    border: 2px solid #333;
    right: -130px;
    top: -38px;
    opacity: .8;
}

.error:after, .error:before {
    top: 100%;
    border: solid;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.error:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #fef3f3;
    border-width: 8px;
    left: 10%;
    margin-left: -8px;
}
.error:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #333;
    border-width: 11px;
    left: 10%;
    margin-left: -11px;
}