.tooltip-top {
    position: relative;
}

.tooltip-top:after {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    content: attr(data-tooltip);
    padding: 6px 10px;
    top: 1.4em;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: black;
    color: white;
    white-space: nowrap;
    border-radius: 2px;
    transition: opacity 0.2s, transform 0.2s;
}

.tooltip-top:hover:after {
    display: block;
    opacity: 1;
    visibility: visible;
}