.tooltip {
    transition: opacity .3s;

    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;

    background-color: #333;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    color: white;
    font-size: 13px;

    &[data-show] {
        opacity: 1;
    }

    &__arrow {
        &,
        &::before {
            position: absolute;
            width: 8px;
            height: 8px;
            z-index: -1;
        }

        &::before {
            content: '';
            transform: rotate(45deg);
            background: #333;
        }

        .tooltip[data-popper-placement^='top'] > & {
            bottom: -4px;
        }

        .tooltip[data-popper-placement^='bottom'] > & {
            top: -4px;
        }
    }
}