Easily Open an Elementor Pro Popup on Hover

No extra plug-ins required!

Demo (hover the images) : 

Get an Elementor Pro Popup To Show on Hover !

The example above keeps the popup open when you hover off.

The following example closes it on hover off. (It closes all open popups).

Get an Elementor Pro Popup To Show on Hover !

To begin with, get your Elementor popup(s) ready

Create them as you wish, then set them to display on the specific pages or posts where you will want this Elementor hover popup to show up. You can ignore the Triggers and Advanced Rules part.

Click Save & Close after the right pages are choosen.

Get an Elementor Pro Popup To Show on Hover !

Then, add this code in an HTML element on the same page as your Elementor hover popup

Super Simple Elementor Free Custom CSS

Adjust the code with your own popups ID, found here :

Get an Elementor Pro Popup To Show on Hover !

If you want the hover popup to stay open after the mouse leaves the trigger element, use this code:

<script>
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.showpopup' );
let popupposts = ['15979']; /* enter your popups IDs here , in the order you want them to show up */

elements.forEach(function(e,i){
e.addEventListener( 'mouseenter', function(){
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
} );
});
});
</script>
Note, the
let popupposts = ['15979'];
line will look like below, if you have more than one popup that you want to show on hover:
let popupposts = [ '15979', '15983'];

If you want the Elementor hover popup to close when the mouse leaves the trigger element (as in the example above), use this code

<script>
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.showpopup' );
let popupposts = [ '15979', '15983']; /* enter your popups IDs here , in the order you want them to show up */

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

e.addEventListener( 'mouseleave', function(event){
jQuery('body').click();
});
});
});
</script>

Finally, give your trigger element(s) the class 'showpopup'

Any element can be a trigger. Images, icons, sections, etc. Just give them the class ‘showpopup’ under Advanced > CSS Classes.

The first element with that class will automatically trigger the first popup you entered in the code, etc. 

Keep reading if you would like to display something other than an Elementor Pro popup on hover!

Method for revealing normal page content on hover

 

Working examples:

Get an Elementor Pro Popup To Show on Hover !
Get an Elementor Pro Popup To Show on Hover !

Yummy Pastas!
$7.99

Design

Marketing

Get an Elementor Pro Popup To Show on Hover !
Get an Elementor Pro Popup To Show on Hover !
Get an Elementor Pro Popup To Show on Hover !
Get an Elementor Pro Popup To Show on Hover !
Get an Elementor Pro Popup To Show on Hover !

Dev System

Support

To begin with, create a PNG* of what you want to show up when you will hover, and place it exactly where you will want it to be

In this example, I used absolute positioning to get it behind my pastas. Probably you will need to use absolute positioning also. Be careful with it, and adjust for different screen sizes.

*Important: This will also work with anything else, like Texts elements, vector graphics, icons… even an entire Elementor section. Just be careful with the positioning settings and mobile settings (You will probably want to hide that pop up for mobiles, in case they click on the trigger element).  In this example a PNG image was used.

When you got the pop-up exactly positionned where you want, give it a class of hovershow

Get an Elementor Pro Popup To Show on Hover !

Then, give a class and a z-index value to the trigger element

Here  I set z-index:11 and gave it the class ‘pastas’.

Finally, insert an HTML element, and add the code below

Replace the ‘pastas’ instances with the actual class you gave your trigger element.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.pastas').on('mouseenter', function() {
$('.hovershow').fadeIn();
});
$('.pastas').on('mouseleave', function() {
$('.hovershow').fadeOut();
});
});
});
</script>

<style>
.hovershow{
display: none;
}
</style>

You can also simply download the template directly from my Templates page. Use the Navigator to see the image that only shows when hovered.

If you would like to use many triggers and popups instead of a single one, as in the smartphone example, use the code below instead.

Give every trigger the class ‘pastas’, and every popup the class ‘hovershow’.

<script>
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.pastas' );
let hovershow = document.querySelectorAll('.hovershow');

elements.forEach(function(e,i){
e.addEventListener( 'mouseenter', function(){
hovershow[i].classList.add('show');

} );
e.addEventListener( 'mouseleave', function(){
hovershow[i].classList.remove('show');
} );
});
});
</script>

<style>
.hovershow{
opacity: 0;
pointer-events: none;
transition: opacity 0.4s linear;
}
.hovershow.show{
opacity: 1;
}
</style>

Et voila! Thanks for reading!

37 Responses

  1. Super helpful! I wanted to create a login popup that shows on hover when a user clicks on the login button. This works like a charm! Thank you very much.

  2. Is there a reason why this technique cannot be used to mimic a mega menu? What are the pros and cons? If yes, this would be great because I don't have to install (and pay!) a plugin just to make a mega menu.

  3. Thanks a lot! Open on Hover works just fine! But if I take the other code for closing when leaving the trigger element, things go crazy and the pop up opens and closes again and again when I move my mouse just a tiny bit.

    How would you make it to close the pop up only when you leave the popup area, not only the trigger element, like a menu button? otherwise how can you click stuff in the pop up when it closes as soon as you leave the trigger?

    Thanks for the help and thanks in advance for an answer!

  4. I have 3 buttons on the right of my screen. Each one triggers a popup on hover. When leaving the trigger the popup has to remain open, for there are links in that popup. But when hovering over another button 2 popups are visible on top op each other. And hovering over the 3rd one, there are 3 popups on top of each other. So hovering over another button should close the other popups. Is that possible?

    1. Hey Dirk! Yes I think that should be possible. However this definitely goes beyond the scope of the current tutorial and would be custom work. You can send me a message through messenger if you are interested!

  5. Thanks for this code. Everything works fine.
    Only I got a flickering mouse when hovering over a popup. Help please, is there a way to fix this?

  6. Do you have a code snippet where I can close all popups when the mouse leaves the actual popup? Your method works great and I have used it to build a mega menu similar to Mailchimp - but the client is asking that the popup closes when the mouse moves off the popup area (like Mailchimp)

  7. I set this up, and it triggered the popup, but it immediately flies off to the right, then reloads ad infinitum. It doesn't matter which of the code snippets I use (stay or leave on mouseleave) I use. Unsure what I've done wrong. Ever hear of similar symptoms?

    thanks

    Kevin

  8. Where exactly do I put the html element? in the pop up or on the page with the image that has the image that I want people to hover over to get the pop up? I tried both ways and its still now working

    1. Hey Rachel!

      The HTML element goes on the page. In the popup, it won't work.

      If it didn't work on the page, probably there was some other error. Were your popups conditions set up to show on that page? Usually that's the problem.

      Cheers!

    1. That problem comes because your popup covers your trigger.

      In these cases, you need the code that says:

      If you want the hover popup to stay open after the mouse leaves the trigger element, use this code:

  9. Also I am triggering popups on a image element, I have given a hover effect to the image, but when I apply the popup, the image hover effect is not showing, only the popup is blinking.

  10. I have also positioned popup to the left while my trigger element is in center now, still the popup is blinking. Can you please help? When i enable "Prevent Closing on Overlay" from advanced settings of popup, then it works perfect on hover trigger at center position but then when i leave mouse it keeps open.

  11. Bonjour,

    Merci pour les codes, cela fonctionne bien. En revanche, je voudrais en plus du hover qui est sur un bouton, que je puisse cliquer sur le bouton et arriver sur une autre page.
    Est-ce que c'est possible ? Le pointer de ma souris clignote et le clic sur le bouton ne fonctionne pas.

    Merci

    1. You need to have the overlay here set to 'off' for this to work, and the popup showing up should not be on top of the button

      1. Merci beaucoup !
        Cela fonctionne parfaitement bien !
        En revanche, j'ai une vingtaine de boutons sur ma page.
        Est-ce que le mieux c'est d'utiliser des ID avec getElementById pour chaque élément, à la place de querySelectorAll ?

      2. Hmm well in fact you are much better with it as it is now. If you use ByID you will need to duplicate the code many times.

        Much better use the code as it is now...

  12. Hi Maxime the script works perfectly except in home page where console show me this error:

    Uncaught TypeError: Cannot read properties of undefined (reading 'showPopup')
    at HTMLDivElement. ((index):783:36)

    Why this happens?
    Thanks

Leave a Reply