Description Box visible with delay

Question

I am currently attempting to create an on mouse hover effect that will display a description and be visible for a couple of seconds allowing the user to use the mouse on the description for a href link and not disappear when you move the mouse away. Thanks

¹

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
setTimeout(showbox,1000);
}

function hidebox(nodeId)
{
    document.getElementById(nodeId).style.display = 'none';
    
}

span.descriptionDisplay {
  display:none;
    padding: 20px;
    margin: 15px 0 0 0;
    width: 780px;
    z-index: 999;
    position: fixed;
    background-color: #f2f2eb;
    color: #222;
    font-size: 19px;
    line-height: 24px;
    -webkit-box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3);
    box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3);
    -webkit-border-radius: 12px;
    border-radius: 12px;

}

Help your my only hope<a href="#" onmouseover="showbox('description') " onmouseout="hidebox('description')" onclick="return false;"> <sup>1</sup></a><span id="description" class="descriptionDisplay">See Jean E. Howard, The Stage and Social Struggle in Early Modern England (London: Routledge, 1994); Christopher Warley, Sonnet Sequences and Social Distinction in Renaissance England (Cambridge: Cambridge University Press, 2005); Christopher Warley, Reading Class Through Shakespeare, Donne, and Milton (Cambridge: Cambridge University Press, 2014).</span>

Answer 1

maybe you should use setTimeout in hidebox function instead showbox? Like this:

function hidebox(nodeId){
    setTimeout(() => {
        document.getElementById(nodeId).style.display = 'none';
    }, 1000)
}

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
}

Now, 1000ms is the delay of text showing after mouseout.