.jq-tooltip {
    color: #fafafa;
    text-align: center;
    max-width: 300px;
    position: absolute;
    z-index: 999999;
    transition-duration: 0.3s;
    transition-property: background, opacity, -webkit-transform;
    transition-property: background, transform, opacity;
    transition-property: background, transform, opacity, -webkit-transform;
    padding: 10px 15px;
    opacity: 0;
    box-sizing: border-box;
    border-radius: 3px;
    white-space: nowrap;
}

.jq-tooltip.tooltip-active {
    opacity: .95;
}

.jq-tooltip::before {
    position: absolute;
    content: '';
}

.jq-tooltip[data-theme='slate'] {
    background-color: #222;
    border-radius: 3px;
}

.jq-tooltip[data-theme='slate']::before {
    background-color: #222;
    border-radius: 3px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
}

.jq-tooltip[data-position~='top'],
.jq-tooltip[data-position~='top-left'],
.jq-tooltip[data-position~='top-right'] {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
}

.jq-tooltip[data-position~='top'].tooltip-active,
.jq-tooltip[data-position~='top-left'].tooltip-active,
.jq-tooltip[data-position~='top-right'].tooltip-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.jq-tooltip[data-position~='top']::before,
.jq-tooltip[data-position~='top-left']::before,
.jq-tooltip[data-position~='top-right']::before {
    bottom: -4px;
    left: 50%;
    margin-left: -7px;
}

.jq-tooltip[data-position~='top-left']::before {
    left: 16px;
}

.jq-tooltip[data-position~='top-right']::before {
    left: calc(100% - 16px);
}

.jq-tooltip[data-position='right'] {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
}

.jq-tooltip[data-position='right'].tooltip-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.jq-tooltip[data-position='right']::before {
    left: -4px;
    top: 50%;
    margin-top: -7px;
}

.jq-tooltip[data-position='bottom'],
.jq-tooltip[data-position='bottom-left'],
.jq-tooltip[data-position='bottom-right'] {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
}

.jq-tooltip[data-position='bottom'].tooltip-active,
.jq-tooltip[data-position='bottom-left'].tooltip-active,
.jq-tooltip[data-position='bottom-right'].tooltip-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.jq-tooltip[data-position='bottom']::before,
.jq-tooltip[data-position='bottom-left']::before,
.jq-tooltip[data-position='bottom-right']::before {
    top: -4px;
    left: 50%;
    margin-left: -7px;
}

.jq-tooltip[data-position='bottom-left']::before {
    left: 16px;
}

.jq-tooltip[data-position='bottom-right']::before {
    left: calc(100% - 16px);
}

.jq-tooltip[data-position='left'] {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
}

.jq-tooltip[data-position='left'].tooltip-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.jq-tooltip[data-position='left']::before {
    left: calc(100% - 8px);
    top: 50%;
    margin-top: -7px;
}