Close popover in JS when another is opened with popper.js

Question

I have some basic HTML and load popper.js. I have about 3 popovers but they don't close when I click open another one.

I use tailwind as css and vanilla JS. I don't want to use jQuery to get this to work. It also shows some error about the event being deprecated but not sure how to fix it.

Please help!

Here is my pen: https://codepen.io/RobineSavert/pen/xxLMqpX

Here is my code:

function openPopover(event, tooltipID, position) {
  let element = event.target;
  while (element.nodeName !== "BUTTON") {
    element = element.parentNode;
  }
  var popper = Popper.createPopper(
    element,
    document.getElementById(tooltipID), {
      placement: position,
    }
  );
  document.getElementById(tooltipID).classList.toggle("hidden");
}



  
    


      
      
      
        
          
            Popover 1 - title
          
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.
          
        
      
      
        
          
            Popover 2 - title
          
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.
          
        
      
      
        
          
            Popover 3 - title
          
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.

user_4684797 · Answer

You can try this:

allPoppers = [];

function openPopover(event, tooltipID, position)
{
  var el = document.getElementById(tooltipID);
  var state = el.style.visibility;
  
  // Close all popovers
  hideElements(allPoppers);

  let element = event.target;
  while (element.nodeName !== "BUTTON") {
    element = element.parentNode;
  }
  
  Popper.createPopper(
    element,
    el, {
      placement: position,
    }
  );

  allPoppers.push(tooltipID);
  toggle(el, state);
}

function toggle(el, state)
{
  if (state == "hidden") {
      el.style.visibility = "visible";
  } else if (state == "visible") {
      el.style.visibility = "hidden";
  } else {
      el.style.visibility = "visible";
  }
}

function hideElements(elements)
{
  var length = elements.length;

  if (length > 0) {
    for (var i = 0; i < length; i++) {
      document.getElementById(elements[i]).style.visibility = "hidden";
    }
  } 
}

.popover {  
    visibility: hidden;
}

Close popover in JS when another is opened with popper.js

1 Answers