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> /* Please login to get the code * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial * Found at this URL https://element.how/elementor-open-tabs-hover/ */ </script>
Code for the old tabs element:
<script> /* Please login to get the code * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial * Found at this URL https://element.how/elementor-open-tabs-hover/ */ </script>
Then, add the class name hoverTabs to your Elementor tabs element
Give your tabs element the class name hoverTabs under Advanced > CSS Classes.
Extra: Add a Fade In Animation to the Elementor Tabs Content
Add this code at the bottom of your HTML element to have a fade in on your tabs content. Adjust the timing as you wish.
<script> /* Please login to get the code * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial * Found at this URL https://element.how/elementor-open-tabs-hover/ */ </script>
Note that the fade in code will only work if you gave your Tabs element the class name "hoverTabs", as explained in the prior step.
Extra: Much more Tabs Features
If you would like even more features, check the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:
Features:
- Polyvalent: Works for the WordPress Menu, Taxonomy Filter and Tabs elements
- Arrow Control: Left and right arrows to scroll (accessible)
- Reactive Arrows: Arrows become unclickable and lower opacity if you can't scroll in that direction
- Conditional Arrow Display: The arrows only show if horizontal scrolling is possible
- Conditional Gradients: Left and right gradients in the directions where scroll is possible
- Image Design: Optional circle image design, with active styling and transition
- Great UX: Automatically scrolls to the center of the clicked item
- PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
- Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
- Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky
Finally, enjoy your hover-able Elementor Tabs element!
I hope you found this useful!
Cheers!
9 Responses
Great tutorial boss, how do I achieve a fade in fade out transitions on the content?
I am Co asking too.
Sorry a fade out transition isn't possible. You can only add a fade in transition to the new content that comes in.
Ok please how do i fade in.
Hey Toby!
I added the instructions for that in the tutorial.
Cheers!
Thanks. Much appreciated
Welcome Toby!
Nice, so how to add a URL link to item tabs? pls add to tutorial
The code is not working for me. I am creating a mega menu using nested tabs and want to show content on hover tabs.