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 !
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!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>