How to Make Elementor Tabs Switch on Hover (Instead of Click)

Sometimes you may want Elementor Tabs to change on hover rather than requiring a click—useful for quick navigation, product showcases, or feature comparisons.

This guide shows how to enable hover switching only for a specific Tabs widget, so other tab widgets on the site remain unchanged.

What this solution does

• Switches Elementor Tabs when you hover over a tab title.
• Keeps Elementor’s internal logic intact by triggering the normal click action.
• Applies only to the Tabs widget you target by CSS ID.

Step 1: Assign a CSS ID to your Tabs widget

1. Open the page in Elementor.
2. Click your Tabs widget.
3. Go to Advanced → CSS ID
4. Enter an ID (example):
   • tabs-hover-products

Important: Do not include # in the CSS ID field.

Step 2: Add the JavaScript snippet

Add this script via:

• a Code Snippets plugin (recommended),
• your theme’s custom JS area,
• or a footer script field.

JavaScript:

(function () {
  "use strict";

  /**
   * Elementor Tabs: Switch tabs on hover (scoped to a specific widget wrapper ID)
   *
   * Steps:
   * 1) Set TABS_WIDGET_ID to your Elementor widget wrapper ID (without #).
   * 2) Save.
   */
  var TABS_WIDGET_ID = "YOUR_TABS_WIDGET_ID"; // e.g. "tabs-hover-products"

  function initElementorTabsHoverScoped(rootEl) {
    if (!rootEl) return;

    var triggers = rootEl.querySelectorAll(".e-n-tab-title");
    if (!triggers.length) return;

    triggers.forEach(function (trigger) {
      if (trigger.dataset.eTabsHoverBound === "1") return;
      trigger.dataset.eTabsHoverBound = "1";

      var hoverTimer = null;

      var activate = function () {
        if (trigger.getAttribute("aria-selected") === "true") return;
        trigger.click();
      };

      trigger.addEventListener("mouseenter", function () {
        hoverTimer = window.setTimeout(activate, 100);
      });

      trigger.addEventListener("mouseleave", function () {
        if (hoverTimer) {
          window.clearTimeout(hoverTimer);
          hoverTimer = null;
        }
      });
    });
  }

  function getTargetRoot() {
    if (!TABS_WIDGET_ID || TABS_WIDGET_ID === "YOUR_TABS_WIDGET_ID") return null;
    return document.getElementById(TABS_WIDGET_ID);
  }

  document.addEventListener("DOMContentLoaded", function () {
    var root = getTargetRoot();
    if (root) initElementorTabsHoverScoped(root);
  });

  window.addEventListener("elementor/frontend/init", function () {
    if (window.elementorFrontend && elementorFrontend.hooks) {
      elementorFrontend.hooks.addAction("frontend/element_ready/widget", function ($scope) {
        var root = getTargetRoot();
        if (root) initElementorTabsHoverScoped(root);
      });
    }
  });
})();

Step 3: Update the ID inside the script

Replace:

var TABS_WIDGET_ID = "YOUR_TABS_WIDGET_ID";

With your widget ID, for example:

var TABS_WIDGET_ID = "tabs-hover-products";

Optional: Adjust hover delay

To make it switch faster/slower, change this value:

window.setTimeout(activate, 100);

• 50 = very fast
• 100 = recommended
• 200 = slower / less accidental switching

Troubleshooting

Tabs are not switching on hover

• Ensure the Tabs widget has a CSS ID set in Elementor.
• Confirm the same ID is added in the script.
• Make sure the script is loading on the frontend (not only in wp-admin).

Hover affects all tab widgets

• This happens only if you used an unscoped script. This KB method is scoped to the CSS ID, so re-check you didn’t add another global version elsewhere.