.tooltip > i {
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
    cursor: pointer;

    &:before,
    &:after {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    &:before {
        white-space: nowrap;
        position: absolute;
        bottom: 150%;
        margin-bottom: 5px;
        padding: 7px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
    }
}

.tooltip:hover > i:before,
.tooltip:hover > i:after {
    visibility: visible;
    opacity: 1;
}