每当它变得可见时自动隐藏相同的元素

Question

这是我的问题。 用户可以悬停不同类型的对象。 每当他/她将对象悬停在生成的html中时（取决于该对象的类型）并注入到div元素的innerHtml中。之后，该元素的可见性将设置为可见。

var tooltip = $("#tooltip")[0]; // Declared globally.

function showTooltip(innerHtml) {
    tooltip.innerHTML = innerHtml;
    tooltip.style.visibility = "visible";
}

每当用户将光标移开或移动到另一个对象时，可见性就会设置为隐藏。 主要问题是，每当用户悬停一个物体，并且不移动鼠标时，工具提示应在5秒后自动关闭。

<div id="tooltip" style="position:absolute; z-index: 50;  visibility:hidden"></div>

作为解决方案，我在showTooltip方法的末尾添加了这段代码：

if(timeoutHandler != null) {
    clearTimeout(timeoutHandler);
}

timeoutHandler = setTimeout(function() {
    if(timeoutHandler !== null) {
        tooltip.style.visibility = "hidden";
        timeoutHandler = null;
    }
}, 5000);

这个问题的最佳解决方案是什么？