/* tooltip.css — CSS-only hover tooltip через [data-tooltip] атрибут.
 *
 * Использование:
 *   <button data-tooltip="Что-то полезное">?</button>
 *   <span data-tooltip="Подсказка" data-tooltip-side="bottom">i</span>
 *
 * Стороны: top (default), bottom, left, right.
 */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 200;
    padding: 4px 10px;
    background: var(--fg);
    color: var(--bg);
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

/* Default = top. Позиционирование чисто через top/bottom/left/right + transform.
   transform: translate*(-50%) — для центрирования вдоль "длинной" оси. */
[data-tooltip]::after,
[data-tooltip][data-tooltip-side="top"]::after {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
[data-tooltip][data-tooltip-side="bottom"]::after {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
[data-tooltip][data-tooltip-side="left"]::after {
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
[data-tooltip][data-tooltip-side="right"]::after {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}

/* Hover/focus просто меняет opacity — transform не трогаем, центрирование
   остаётся правильным для каждой стороны. */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
}