Elementor Open Tabs On Hover Instead of Click

In this tutorial you are going to learn how to to open Elementor tabs on hover instead of click.

This works for both the new Elementor tabs element, as well as the 'old' one.

Here is a demo of what we will be creating:

Let's get started!

First, add this Elementor Open Tabs on Hover code

Add the code below in an HTML element, on the same page as you have the Elementor tabs that you want to be openable on hover.

Code for the new tabs element (the one container-based):

<script>
/* Code from https://element.how/elementor-open-tabs-hover/
* Version 1.0
* Copyright 2023 Maxime Desrosiers
*/
document.addEventListener('DOMContentLoaded',function(){
jQuery(function($){
$('.hoverTabs .e-n-tab-title').mouseenter(function(){
$(this).click();
});
});
});
</script>

Code for the old tabs element:

<script>
/* Code from https://element.how/elementor-open-tabs-hover/
* Version 1.0
* Copyright 2023 Maxime Desrosiers
*/
document.addEventListener('DOMContentLoaded',function(){
jQuery(function($){
$('.hoverTabs .elementor-tab-desktop-title').mouseenter(function(){
$(this).click();
});
});
});
</script>

Then, add the class name hoverTabs to your Elementor tabs element

Give your tabs element the class name hoverTabs under Advanced > CSS Classes.

Finally, enjoy your hover-able Elementor Tabs element!

I hope you found this useful!

Cheers!