---
title: "How to Use the Script Content With the Hover Card in Elementor?"
url: https://theplusaddons.com/docs/use-script-content-with-hover-card-in-elementor/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Use-the-Script-Content-With-the-Hover-Card-in-Elementor_-1024x536.jpg
word_count: 527
---

# How to Use the Script Content With the Hover Card in Elementor?

## 

- The Plus Addons for Elementor Hover Card prints Script content inside a script tag, and the code runs before the card’s HTML is on the page, so it needs a DOMContentLoaded listener.
- Hover Card script content runs only for logged-in administrators, while logged-out visitors and users with other roles get no script.
- The Hover Card widget is deprecated since The Plus Addons for Elementor 6.5.0 and is removed once The Plus Addons for Elementor 6.6.0 is released; Elementor Element Cache can also keep one viewer’s output for 1 Day unless Advanced > Cache Settings is set to Inactive.

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](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hover-card/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![A Hover Card row with Content set to Script and a DOMContentLoaded listener in the Custom Script field](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-content-script.webp)

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.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Use Style content with the Hover Card](https://theplusaddons.com/docs/use-style-content-with-hover-card-in-elementor/)- [Add a hover effect with a Custom Hover class](https://theplusaddons.com/docs/add-hover-effect-with-custom-hover-class-in-elementor-hover-card/)