/* Pure CSS, no JS */
[data-tooltip] {
    position: relative
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--k-900);
    color: var(--k-50);
    font-size: .77rem;
    padding: var(--k-sp-1) var(--k-sp-3);
    border-radius: var(--k-tooltip-r);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: var(--k-z-tip);
    box-shadow: var(--k-sh-md);
    max-width: 240px;
    text-align: center;
    transition: opacity var(--k-fast), transform var(--k-fast);
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--k-900);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--k-fast);
    z-index: var(--k-z-tip);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* Placements */
[data-tooltip][data-placement="bottom"]::before {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px)
}

[data-tooltip][data-placement="bottom"]::after {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: var(--k-900)
}

[data-tooltip][data-placement="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0)
}

[data-tooltip][data-placement="left"]::before {
    bottom: auto;
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px)
}

[data-tooltip][data-placement="left"]:hover::before {
    transform: translateY(-50%) translateX(0)
}

[data-tooltip][data-placement="right"]::before {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px)
}

[data-tooltip][data-placement="right"]:hover::before {
    transform: translateY(-50%) translateX(0)
}

/* Light mode invert */
[data-theme="light"] [data-tooltip]::before {
    background: var(--k-200);
    color: var(--k-900)
}

[data-theme="light"] [data-tooltip]::after {
    border-top-color: var(--k-200)
}