CSS Tooltip - Namigi ob prekritju

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Odzivni Tooltip-i - Primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="tooltip-container">
        <div class="tooltip">
            Vrh (Privzeto)
            <span class="tooltip-text">To je preprost tooltip na vrhu!</span>
        </div>
    
        <div class="tooltip right" id="desniTooltip">
            Desna stran
            <span class="tooltip-text">Ta tooltip se prikaže na desni strani.</span>
        </div>
    
        <div class="tooltip left" id="leviTooltip">
            Leva stran
            <span class="tooltip-text">Ta tooltip se prikaže na levi strani.</span>
        </div>
    </div>
</body>
</html>

.tooltip-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    max-width: 600px;
    margin: 2rem auto;
    min-height: 180px;
    padding: 40px;
    /* Poenostavljen, izjemno moderen in nežen gradient */
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 216, 255, 0.05));
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 16px;
}

/* Stil za element, ki sproži tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    color: var(--fg, #334155);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 20px;
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tooltip:hover {
    border-color: var(--accent, #007bff);
    color: var(--accent, #007bff);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.1);
}

/* Splošni stil za oblaček z besedilom (Tooltip) */
.tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    background-color: #1e293b; /* Lepša, temno siva barva namesto čiste črne */
    color: #ffffff;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Mala puščica za zgornji tooltip */
.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Sprožitev prikaza ob lebdenju z miško */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* POZICIJA: DESNO */
.tooltip.right .tooltip-text {
    top: 50%;
    left: 108%;
    bottom: auto;
    transform: translateY(-50%) translateX(-5px);
}

.tooltip.right:hover .tooltip-text {
    transform: translateY(-50%) translateX(0);
}

.tooltip.right .tooltip-text::after {
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-color: transparent #1e293b transparent transparent;
}

/* POZICIJA: LEVO */
.tooltip.left .tooltip-text {
    top: 50%;
    right: 108%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(5px);
}

.tooltip.left:hover .tooltip-text {
    transform: translateY(-50%) translateX(0);
}

.tooltip.left .tooltip-text::after {
    top: 50%;
    right: -6px;
    left: auto;
    transform: translateY(-50%);
    border-color: transparent transparent transparent #1e293b;
}

/* Razred za zameglitev neaktivnega elementa (ki ga dodaja JS) */
.tooltip.hidden {
    opacity: 0.4;
    transform: scale(0.96);
    filter: grayscale(40%);
}

/* Prilagoditev za mobilne naprave */
@media screen and (max-width: 576px) {
    .tooltip-container {
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
    }
    .tooltip {
        text-align: center;
    }
    /* Na mobilnih napravah spremenimo stranske v zgornje, da ne gredo čez rob */
    .tooltip.left .tooltip-text, .tooltip.right .tooltip-text {
        bottom: 130%;
        left: 50%;
        top: auto;
        right: auto;
        transform: translateX(-50%);
    }
    .tooltip.left:hover .tooltip-text, .tooltip.right:hover .tooltip-text {
        transform: translateX(-50%) translateY(0);
    }
    .tooltip.left .tooltip-text::after, .tooltip.right .tooltip-text::after {
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-color: #1e293b transparent transparent transparent;
    }
}

// Varno ovijemo v DOMContentLoaded poslušalec dogodkov
document.addEventListener("DOMContentLoaded", function() {
    const desniTooltip = document.getElementById("desniTooltip");
    const leviTooltip = document.getElementById("leviTooltip");

    function toggleTooltip(activeTooltip, inactiveTooltip) {
        // Varovalo: Če katerega od elementov ni v DOM-u, prekinemo, da preprečimo sesutje
        if (!activeTooltip || !inactiveTooltip) return;

        activeTooltip.addEventListener("mouseenter", () => {
            inactiveTooltip.classList.add("hidden");
        });

        activeTooltip.addEventListener("mouseleave", () => {
            inactiveTooltip.classList.remove("hidden");
        });
    }

    // Varno dodajanje učinkov medsebojnega skrivanja
    toggleTooltip(desniTooltip, leviTooltip);
    toggleTooltip(leviTooltip, desniTooltip);
});

CSS Tooltip (Namig ob prekritju)