[data-tooltip] {
    position: relative;
}

    [data-tooltip]::after {
        font-family: Helvetica, sans-serif;
        background: rgba(51, 51, 51, 0.9);
        background: rgba(55, 61, 73, 0.9);
        border-radius: 3px;
        bottom: 100%;
        color: #fff;
        content: attr(data-tooltip);
        display: block;
        font-size: 12px;
        left: 50%;
        line-height: normal;
        max-width: 32rem;
        opacity: 0;
        overflow: hidden;
        padding: 0.6rem 1rem;
        pointer-events: none;
        position: absolute;
        text-overflow: ellipsis;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        transition: all 0.216s ease;
        z-index: 99;
    }

    [data-tooltip]:focus::after,
    [data-tooltip]:hover::after {
        opacity: 1;
        -webkit-transform: translate(-50%, -0.5rem);
        -ms-transform: translate(-50%, -0.5rem);
        transform: translate(-50%, -0.5rem);
    }

    [data-tooltip][disabled],
    [data-tooltip].disabled {
        pointer-events: auto;
    }

[data-tooltip-pos=right]::after {
    bottom: 50%;
    left: 100%;
    -webkit-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

[data-tooltip-pos=right]:focus::after,
[data-tooltip-pos=right]:hover::after {
    -webkit-transform: translate(0.5rem, 50%);
    -ms-transform: translate(0.5rem, 50%);
    transform: translate(0.5rem, 50%);
}

[data-tooltip-pos=bottom]::after {
    bottom: auto;
    top: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

[data-tooltip-pos=bottom]:focus::after,
[data-tooltip-pos=bottom]:hover::after {
    -webkit-transform: translate(-50%, 0.5rem);
    -ms-transform: translate(-50%, 0.5rem);
    transform: translate(-50%, 0.5rem);
}

[data-tooltip-pos=left]::after {
    bottom: 50%;
    left: auto;
    right: 100%;
    -webkit-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

[data-tooltip-pos=left]:focus::after,
[data-tooltip-pos=left]:hover::after {
    -webkit-transform: translate(-0.5rem, 50%);
    -ms-transform: translate(-0.5rem, 50%);
    transform: translate(-0.5rem, 50%);
}