js Tooltip mit verzögertem Mouseout ohne jQuery

Question

Ich möchte einen Tooltip anzeigen, wenn Sie ein div schweben. Es sollte auch angezeigt werden, wenn die Maus den tooltip-div schwebt.

Hinzufügen eines Ereignis-Listeners tut diesen Job, aber wenn beide divs nicht überlappt die mouseout Aufrufe, wenn die Maus zwischen ihnen ist und die QuickInfo verschwindet.

Jetzt möchte ich eine Verzögerung für die Mouseout hinzufügen, die abgebrochen wird, wenn es einen neuen Mouseover bekommt, aber ich weiß nicht wie.

document.getElementById("hoverElem").addEventListener("mouseover", function() { 
 
    document.getElementById("displayElem").style.visibility = "visible"; 
 
}); 
 

 
document.getElementById("hoverElem").addEventListener("mouseout", function() { 
 
    document.getElementById("displayElem").style.visibility = "hidden"; 
 
});

#hoverElem { 
 
    position: fixed; 
 
    height: 100px; 
 
    weidth: 200px; 
 
    top: 0px; 
 
    left: 50%; 
 
    background-color: white; 
 
} 
 
#displayElem { 
 
    position: fixed; 
 
    height: 100px; 
 
    weidth: 20px; 
 
    top: 150px; 
 
    left: 50%; 
 
    background-color: yellow; 
 
    visibility: hidden; 
 
}

<div id="hoverElem"> 
 
    A little Div 
 
    <div id="displayElem"> 
 
    Tooltip to show 
 
    </div> 
 
</div>

Answer 1

Sie können einen Timer in der mouseleave intiate und dann klar, dass es in mouseenter von displayElem wie

document.getElementById("hoverElem").addEventListener("mouseenter", function() { 
 
    document.getElementById("displayElem").style.visibility = "visible"; 
 
}); 
 

 
var hoverTimer; 
 
document.getElementById("hoverElem").addEventListener("mouseleave", function() { 
 
    hoverTimer = setTimeout(function() { 
 
    document.getElementById("displayElem").style.visibility = "hidden"; 
 
    }, 500); 
 
}); 
 
document.getElementById("displayElem").addEventListener("mouseenter", function() { 
 
    clearTimeout(hoverTimer); 
 
}); 
 

 
document.getElementById("displayElem").addEventListener("mouseleave", function() { 
 
    this.style.visibility = "hidden"; 
 
});

#hoverElem { 
 
    position: fixed; 
 
    height: 100px; 
 
    weidth: 200px; 
 
    top: 0px; 
 
    left: 50%; 
 
    background-color: white; 
 
} 
 
#displayElem { 
 
    position: fixed; 
 
    height: 100px; 
 
    weidth: 20px; 
 
    top: 150px; 
 
    left: 50%; 
 
    background-color: yellow; 
 
    visibility: hidden; 
 
}

<div id="hoverElem"> 
 
    A little Div 
 
    <div id="displayElem"> 
 
    Tooltip to show 
 
    </div> 
 
</div>

Answer 2

haben Sie conside Rot stattdessen mit reinem CSS?

div { 
 
    position: fixed; 
 
    height: 100px; 
 
    width: 200px; 
 
    top: 0px; 
 
    left: 50%; 
 
    background-color: black; 
 
} 
 

 
div:hover span, 
 
span:hover{ 
 
    opacity:1; 
 
} 
 

 
span { 
 
    display:block; 
 
    opacity:0; 
 
    color:orange; 
 
    -webkit-transition-delay: .5s; 
 
    transition-delay: .5s; 
 
    -webkit-transition:opacity 1s ; 
 
    transition:opacity 1s ; 
 
    
 
    
 
    position: fixed; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: 150px; 
 
    left: 50%; 
 
    background-color: yellow; 
 
    visibility: visible; 
 
}

<div> 
 
    <span>lorem Ipsum</span> 
 
</div>