Mousevover Popup Delay - Elementor Popup-CodePudding

On a webpage is a link. When you hover over the link with the mouse, it displays a popup of another webpage. I have to delay the popup because right now it pops up too quickly on mouseover. ALso I need to stop opening the popup if the mouse moves off the link before the popup opens.

I have tried to add the setTimeout function to the code, but I do not know where to put it. Wherever I try to put it, the popup stops working, Ive tried to put setTimeout(function(){ CODE }, 1000; around the second part of the code but it it doesnt work.

Here is the code below:

<script>
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.popupgg' );
let popupposts = ['3525'];

elements.forEach(function(e,i){
e.addEventListener( 'mouseenter', function(){
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
} );
});
});
</script>

Thank you for the help.

CodePudding user response：

please see my working example, here I'm triggering an alert after one second and half. I've just commented the line //elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } ); since I have no access to the function elementorProFrontend.modules.popup.showPopup() but I'm making it work just using an alert() function

<!DOCTYPE html>
<html>
  <head>
    
    
  </head>
  <body>

  <h1 >My First Heading</h1>
  <p>My first paragraph.</p>


  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let elements = document.querySelectorAll( '.popupgg' );
      let popupposts = ['3525'];
      
      elements.forEach(function(e,i) {
        let pupup_timeout; //create a vriable to store the timeout reference
        e.addEventListener( 'mouseenter', function() {
          pupup_timeout = setTimeout(function() {
            alert('This alert is showed after 1500 millisecons, one second and half');
            //elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
          }, 1500);
        });
        
        e.addEventListener('mouseout', function() {
          clearTimeout(pupup_timeout); // clear the timeout on mouse out element
        });
      });
    });
    </script>
  </body>
</html>