Как сделать так, чтобы диалог появлялся через 3 секунды после события onMouseOver ⇐ CSS

[Anonymous]

У меня есть элемент, и после наведения на него указателя мыши я показываю дополнительную информацию

Код: Выделить всё

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;
}

Но я хочу, чтобы эта информация отображалась, если пользователь наводит указатель мыши на 3 секунды, и если он оставит указатель мыши, не отображать этот DIV.
Как это сделать это с использованием js или css?

Подробнее здесь: https://stackoverflow.com/questions/793 ... nmouseover