/*! before Tooltips 1.00 | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */

/*el contenedor necesita la posicion relativa y comportarse como bloque y texto al mismo tiempo*/
.btips {
    position: relative;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    height: 100%; /*fix para contenedores que no sean texto*/
    font-size: 16px;
}

.btips:before {
    /*content tomará siempre los datos del atributo title*/
    content: attr(data-title);
    /*nowrap evita que nuestro tooltip se vea limitado por el contenedor*/
    white-space: nowrap;
    /*el tooltip siempre esta posicionado por encima de su contenedor*/
    top: -10px;
    /*y le damos un estilo por default*/
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    padding: 0.8em 1em;
    background: rgba(0,0,0,0.95);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 0px 0px rgba(0, 0, 0, 0.05);
}
a.btips:before {
    content: attr(title);
}
.btips:after, .btips:before {
    display: none;/*ocultamos todo*/
    /*posicionamos el toltip siempre en el centro*/
    position: absolute;
    left: 50%;
    z-index: 100;
    -webkit-transform: translate(-50%, -100%);
       -moz-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
         -o-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    -webkit-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
}
/*creamos un indicador*/
.btips:after {
    content: "";
    border-style: solid;
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
    border-width: 10px 10px;
    top: 8px;
}
/*mostramos todo*/
.btips:hover:after, .btips:hover:before {
    display: block;
}

/*left*/
.btips.l:after, .btips.l:before {
    top: 50%;
    right: auto;
    -webkit-transform: translate(-100%, -50%);
       -moz-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
         -o-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
}
.btips.l:before {
    left: -10px;
}
.btips.l:after {
    left: 8px;
    border-color: transparent transparent transparent rgba(0,0,0,0.8);
}

/*right*/
.btips.r:after, .btips.r:before {
    top: 50%;
    left: auto;
    -webkit-transform: translate(100%, -50%);
       -moz-transform: translate(100%, -50%);
        -ms-transform: translate(100%, -50%);
         -o-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
}
.btips.r:before {
    right: -10px;
}
.btips.r:after {
    right: 8px;
    border-color: transparent rgba(0,0,0,0.8) transparent transparent;
}

/*bottom*/
.btips.b:after, .btips.b:before {
    top: auto;
    -webkit-transform: translate(-50%, 100%);
       -moz-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
         -o-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
}
.btips.b:before {
    bottom: -10px;
}
.btips.b:after {
    bottom: 8px;
    border-color: transparent transparent rgba(0,0,0,0.8) transparent;
}