如何使用 JavaScript（不是 jQuery）隐藏工具提示

Question

我使用这个网站创建了我的工具提示：

http://www.w3schools.com/howto/howto_css_tooltip.asp

现在我想知道如何使用 vanilla javascript 解决方案在任意时间后关闭工具提示。

到目前为止我的解决方案：

window.setTimeout(closeTooltips(), 700);

function closeTooltips(){
    document.getElementsByClassName('tooltipText').style.display="none";
}

我明白为什么这不起作用，但我看不到解决方案。 我可以遍历 getElementsByClassName 返回的 NodeList 并隐藏每一个，但我觉得这可能不是一个理想的解决方案。

Answer 1

你很接近，但是使用setTimeout ，你不是试图调用函数，你只是试图引用它，所以不要包含括号（这是 JavaScript 中的“调用运算符”）：

setTimeout(closeTooltips, 700);

接下来，您需要迭代 DOM 查询找到的所有元素并单独设置它们的样式，如下所示：

function closeTooltips(){
    var elems = document.querySelectorAll('.tooltipText');

    elems.forEach(function(el){
      el.style.display = "none";
    });
}