.tooltip {
    --width: auto;
    --height: auto;
    --maxWidth: auto;
    --maxHeight: auto;

    --anchor-el-name: unset;
    --tooltip-el-name: unset;

    position-anchor: var(--anchor-el-name);
    anchor-name: var(--tooltip-el-name);
    position-area: block-start;
    position-try-fallbacks: --under, --on-left, --on-right;

    inset: auto;
    box-sizing: border-box;
    border: none;
    margin: 10px;
    padding: 10px;
    border-radius: 6px;
    background-color: hsl(0, 0%, 0%);
    color: hsl(0, 0%, 100%);

    width: var(--width);
    height: var(--height);
    max-width: var(--maxWidth);
    max-height: var(--maxHeight);
}

.tooltipContent {
    background-color: inherit;
}

/* используются для хвостика отрисовки хвостика тултипа */
.tooltip::before,
.tooltip::after,
.tooltipContent::before,
.tooltipContent::after {
    content: '';
    position: fixed;
    background-color: inherit;
    margin: auto;
    position-anchor: var(--anchor-el-name);
}

/* для вертикальной ориентации */
.tooltip::before,
.tooltip::after {
    inset-inline: anchor(start) anchor(end);
    width: 10px;
    max-height: 10px;
}

/* для кейса, когда тултип над якорем */
.tooltip::before {
    inset-block-start: anchor(end);
    inset-block-end: anchor(var(--tooltip-el-name) start);
    transform: translateY(5px) rotate(45deg);
}

/* для кейса, когда тултип под якорем */
.tooltip::after {
    inset-block-start: anchor(var(--tooltip-el-name) end);
    inset-block-end: anchor(start);
    transform: translateY(-5px) rotate(45deg);
}

/* для горизонтальной ориентации */
.tooltipContent::before,
.tooltipContent::after {
    inset-block: anchor(start) anchor(end);
    height: 10px;
    max-width: 10px;
}

/* для кейса, когда тултип справа от якоря */
.tooltipContent::before {
    inset-inline-start: anchor(end);
    inset-inline-end: anchor(var(--tooltip-el-name) start);
    transform: translateX(5px) rotate(45deg);
}

/* для кейса, когда тултип слева от якоря */
.tooltipContent::after {
    inset-inline-start: anchor(var(--tooltip-el-name) end);
    inset-inline-end: anchor(start);
    transform: translateX(-5px) rotate(45deg);
}

@position-try --under {
    position-area: block-end;
}

@position-try --on-left {
    position-area: inline-start;
}

@position-try --on-right {
    position-area: inline-end;
}
