Автоматически скрывать один и тот же элемент всякий раз, когда он становится видимым

Question

Вот моя проблема. Пользователь может парить объекты разных типов. Всякий раз, когда он или она наводит курсор на объект, генерируется html (в зависимости от типа этого объекта) и внедряется в innerHtml элемента div. После этого видимость этого элемента становится видимой.

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

Как лучше всего решить эту проблему?