Javascript js工具提示，带延迟鼠标输出，不带jQuery

当鼠标悬停在div上时，我想显示工具提示。当鼠标悬停在

工具提示div上时，也应该显示该提示

添加事件侦听器可以完成此任务，但如果两个div都没有重叠，则当鼠标位于它们之间时，mouseout调用将消失，工具提示也将消失

现在，我想为mouseout添加一个延迟，当它得到一个新的mouseover时，它将被取消，但我不知道如何进行


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{
位置：固定；
高度：100px；
重量：200px；
顶部：0px；
左：50%；
背景色：白色；
}
#显示元素{
位置：固定；
高度：100px；
重量：20px；
顶部：150px；
左：50%；
背景颜色：黄色；
可见性：隐藏；
}

一小段
要显示的工具提示
您可以在
mouseleave
中启动计时器，然后在的
mouseenter
中清除计时器
displayelm
like


document.getElementById（“hoverElem”）.addEventListener（“mouseenter”，function（））{
document.getElementById（“displayElem”）.style.visibility=“visible”；
});
无功定时器；
document.getElementById（“hoverElem”）.addEventListener（“mouseleave”，function（））{
hoverTimer=setTimeout（函数（）{
document.getElementById（“displayElem”）.style.visibility=“hidden”；
}, 500);
});
document.getElementById（“displayElem”）.addEventListener（“mouseenter”，function（））{
clearTimeout（悬停计时器）；
});
document.getElementById（“displayElem”）.addEventListener（“mouseleave”，function（））{
this.style.visibility=“hidden”；
});
#hoverElem{
位置：固定；
高度：100px；
重量：200px；
顶部：0px；
左：50%；
背景色：白色；
}
#显示元素{
位置：固定；
高度：100px；
重量：20px；
顶部：150px；
左：50%；
背景颜色：黄色；
可见性：隐藏；
}

一小段
要显示的工具提示
您考虑过使用纯CSS吗


div{
位置：固定；
高度：100px；
宽度：200px；
顶部：0px；
左：50%；
背景色：黑色；
}
div：悬停跨度，
跨度：悬停{
不透明度：1；
}
跨度{
显示：块；
不透明度：0；
颜色：橙色；
-webkit转换延迟：.5s；
转换延迟：.5s；
-webkit转换：不透明度1s；
过渡：不透明度1s；
位置：固定；
高度：100px；
宽度：100px；
顶部：150px；
左：50%；
背景颜色：黄色；
能见度：可见；
}

乱数假文
document.getElementById（“hoverElem”）.addEventListener（“mouseout”，function（）{setTimeout（function（）{document.getElementById（“displayElem”）.style.visibility=“hidden”}，1000）；}）请参考此链接。为什么需要js来制作工具提示？对js有什么严格的要求吗？