Script rows add your own JavaScript to a layout built with the Hover Card widget, for example to react when a card is hovered.
The Script content type of the Hover Card widget in The Plus Addons for Elementor prints that code in a script tag. It has strict limits, listed below, so check them before you rely on it.
To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — Hover Card is part of the free The Plus Addons for Elementor plugin. It works the same with the Pro plugin installed.
- Widget to enable: Hover Card, switched on under The Plus Addons > Widgets.
- Deprecated: the editor shows “The Hover Card widget has been deprecated since The Plus Addons for Elementor 6.5.0. Note that Hover Card will be completely removed once The Plus Addons for Elementor 6.6.0 is released.” No replacement widget is named, so avoid it for new pages.
- Skills: you build the HTML structure yourself, row by row, so basic HTML and CSS knowledge helps.
How to Add Script Content
- Add the Hover Card widget and click + Add Item in Content > Hover Card.
- Set Open Tag and Close Tag to None. The script tag is added for you.
- Set Content to Script and write the JavaScript, without a script tag, in Custom Script. Wrap it in a DOMContentLoaded listener, because the script runs before the card’s HTML is on the page.
This script adds the class is-hovered to the card row (class js-card) when the pointer enters it:
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.js-card').forEach(function (card) {
card.addEventListener('mouseenter', function () {
card.classList.add('is-hovered');
});
});
});How It Behaves
- The script tag is printed inside the widget, before the rows’ HTML. Code that looks for the card straight away finds nothing; the same code inside DOMContentLoaded works.
- Strings that contain HTML tags, and both single and double quotes, are kept.
Limitations
- The script only runs for logged-in administrators. Logged-out visitors and users with other roles get no script.
- The code is filtered like post content: &&, < and > are changed, and a script that contains any of them stops with a syntax error.
- Elementor caches widget output by default (Elementor > Settings > Performance > Element Cache, 1 Day), so the first person to view the page decides for everyone until the cache expires. Set the widget’s Advanced > Cache Settings to Inactive to render it fresh for each viewer.
- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.
Troubleshooting
The script does nothing
Check that you are logged in as an administrator, wrap the code in DOMContentLoaded, and remove &&, < and >. Open the browser console to see syntax errors.
It works for me but not for visitors
That is the administrator-only limitation. Load the script somewhere every visitor receives it.
