.tooltip {
    position: relative;
    overflow: visible;
}

.tooltip > div.content {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    width: max-content;
    background: inherit;
    background-color: inherit;
    transform: translate(-50%, calc(1em + 100%));
    margin: 0;
    padding: 0;
    z-index: 999999;
    pointer-events: none;
    transition: opacity 0.2s;
    opacity: 0;
}

.tooltip:hover > div.content,
.tooltip:active > div.content {
    opacity: 1;
}

.tooltip > div.content::after {
    content: "";
    border: 1em solid transparent;
    border-bottom: 1em solid var(--custom-back);
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    right: auto;
    top: -2em;
    bottom: auto;
    margin-left: -1em;
    transform: scale(0.5, 1);
}

.tooltip > div.content.top-left {
    left: max(calc(100% - 1em), 50%);
    right: auto;
    transform: translate(calc(-1em), calc(1em + 100%));
}

.tooltip > div.content.top-left::after {
    left: 1em;
    right: auto;
}

.tooltip > div.content.top-right {
    left: auto;
    right: max(calc(100% - 1em), 50%);
    transform: translate(1em, calc(1em + 100%));
}

.tooltip > div.content.top-right::after {
    left: auto;
    right: 0;
}

.tooltip > div.content.bottom {
    top: 0;
    bottom: auto;
    transform: translate(-50%, calc(-1em - 100%));
}

.tooltip > div.content.bottom::after {
    border: 1em solid transparent;
    border-top: 1em solid var(--custom-back);
    top: auto;
    bottom: -2em;
}