---
title: "How to Use the Text Content With the Hover Card in Elementor?"
url: https://theplusaddons.com/docs/use-text-content-with-hover-card-in-elementor/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Text rows add headings, prices, labels and button text to a layout built with the Hover Card widget. With the Text content type of the Hover Card widget in The..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Use-the-Text-Content-With-the-Hover-Card-in-Elementor_-1024x536.jpg
word_count: 543
---

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

## 

- Utilizes the Text content feature in the Hover Card widget of The Plus Addons for Elementor to enhance website design.
- Enables customization of text style, including typography, color, and text shadow for normal and hover states.
- Allows combination of various content types within different items to create a unique layout in the Hover Card widget.

Text rows add headings, prices, labels and button text to a layout built with the Hover Card widget.

With the **Text** content type of the **Hover Card** widget in The Plus Addons for Elementor, each row wraps a piece of text in the tag you choose and styles it for its normal and hover state.

*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 Text Content

- Add the **Hover Card** widget and click **+ Add Item** in **Content > Hover Card**.- On the **Open** tab, choose the tag for the text in **Open Tag**, for example **H3** for a title or **p** for a paragraph. Add a class in **Enter Class** if you want to target it with CSS.- Leave **Close Tag** on the **Close** tab set to **Default**, so the row closes its own tag.- Set **Content** to **Text** and type the text in the **Text** field.

![A Hover Card row with Open Tag H3, Content set to Text and the product title in the Text field](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-content-text.webp)

Adding a text row, in motion:

![Adding a Text row to the Hover Card widget](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-text-content-type.gif)

- Under **Style**, set **Display** to **Block** so the text starts on its own line, then style it under **Text Style**: **Typography**, and **Color** and **Text Shadow** on the **Normal** and **Hover** tabs.

![Text Style settings with Typography and the Normal tab Color of the title row](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-text-style.webp)

## How It Behaves

- The text keeps simple HTML such as **<strong>**, **<em>** and inline styles. Script tags and event attributes such as onclick are removed.- Text Style styles the tag the row opens. The **Hover** tab colour applies while the pointer is over that tag and changes over 0.3 seconds.- With **Display** left on Initial, an H3 or p tag sits on the same line as the text around it. Block puts it on its own line.- The text rows of a card can sit inside a Div that an earlier row opened; see [Add multiple elements inside one element](https://theplusaddons.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/).

## Limitations

- With **Open Tag** set to None, Text Style is still shown but has no effect, because there is no tag to style.- The **Custom Hover** switch on the Text Style Hover tab ignores its **Enter Class**: hovering anywhere inside the widget changes the text.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.

## Troubleshooting

### The text colour or typography does not change

Give the row an **Open Tag** other than None. Text Style needs a tag to style.

### The title and price run together on one line

Set **Display** to **Block** on each text row.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Use HTML content with the Hover Card](https://theplusaddons.com/docs/use-html-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/)