How to hide tooltips using JavaScript (not jQuery)

Question

I created my tooltips using this website:

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

Now I'm wondering how would I close the tooltip after an arbitrary amount of time using a vanilla javascript solution.

My solution so far:

window.setTimeout(closeTooltips(), 700);

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

I understand why this is not working but I'm unable to see a solution. I could iterate through the NodeList that getElementsByClassName returns and hide each individual one but I feel that is probably not an ideal solution.

Iterating through the elements will definitely be necessary. — Pointy
– Pointy, Commented Feb 1, 2017 at 14:37

Scott Marcus · Accepted Answer · 2017-02-01 14:39:14Z

3

You were close, but with setTimeout, you aren't trying to invoke the function, you are only trying to reference it, so don't include the parenthesis (which are the "invocation operator" in JavaScript):

setTimeout(closeTooltips, 700);

Next, you need to iterate all the elements found by your DOM query and set their styles individually, like this:

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

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

edited Feb 1, 2017 at 14:39

answered Feb 1, 2017 at 14:36

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pointy Over a year ago

This is correct, but the function will still need to iterate through the elements if it's going to work.

Scott Marcus Over a year ago

@Pointy Yes, I was working on that as you commented.

Pointy Over a year ago

OK, but note that not all browsers equip NodeList instances with a .forEach() method.

Graham Penrose Over a year ago

Scott, I deleted my answer. When you posted yours, you hadn't included anything about iteration (you'll note that your edit time and my posting time were nearly identical). I've removed mine as the forEach on a NodeList was also functionally incorrect. Please accept the upvote.

Collectives™ on Stack Overflow

How to hide tooltips using JavaScript (not jQuery)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related