How to make dialog show up in 3 seconds after event onMouseOver

I have an element and after over mouse on it, i show up additional information

document.getElementById(item.id).getElementsByTagName("div")[0].classList.add(classes.hoverDescription)

 .treeNodeDescription{
    font-family: "liberation-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    padding: 5px;
    background-color: #333333;
    color: #F8F7F7;
    padding: 10px;
    border-radius: 10px;
    display: none;
    position: absolute;
    top: 130%;
    left: 21%;   
    z-index: 10;
    max-width: 300px;
    text-wrap: wrap;
  }

 .hoverDescription{
    display: block;
  }

But i want to show up this information if user over his mouse along 3 seconds, and if he leave his mouse, don’t show up this DIV.
How to do it using js or css?