#data-info {
    position: absolute;
    top: -100px;
    left: -230px;
    z-index: 10000;
    display: block;
    margin-left: -18px;
    background: #383838;
    color: #fff;
    padding: 8px 10px;
    font: normal 15px "OpenSans", sans-serif;
    width: 230px;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    white-space: normal;

    -webkit-transition: transform .3s ease, opacity .3s ease;
    -moz-transition: transform .3s ease, opacity .3s ease;
    transition: transform .3s ease, opacity .3s ease;
}

#data-info.open {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px);
    visibility: visible;
    opacity: 1;
}