How to Use the Style Content With the Hover Card in Elementor?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor allows users to apply custom CSS for complete control over Hover Card design.
  • The Hover Card widget requires installation and activation of The Plus Addons for Elementor to function properly.
  • Users can add custom CSS by selecting Style from the Content dropdown in the Hover Card widget settings.
Table Of Content

If you want to use custom CSS for your layout, you can easily do that with the Hover Card widget form The Plus Addons for Elementor. By using custom CSS, you have complete control over the design and appearance of the hover cards.

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 its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To use custom CSS in the Hover Card widget, add the widget on the page and click the +ADD ITEM button to add an item.

Then select None as the opening and closing tags.

Note: Style content will add its own tag automatically. 

From the Content dropdown, select Style, then in the Custom Style field, you can add your custom CSS code.

Hover card style content type

Also, read How to Use the Script Content With the Hover Card in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my custom CSS isn't applying to the Hover Card?

If your custom CSS isn't applying, ensure that you've selected 'Style' from the Content dropdown in the Hover Card widget settings. Also, check that you have entered your CSS in the Custom Style field correctly. Remember, if you select 'None' for the opening and closing tags, the Style content will automatically add its own tag, which could affect how your CSS is applied.

Can I use the Hover Card widget for product displays in Elementor?

The Hover Card widget is ideal for creating engaging product displays in Elementor. By using custom CSS, you can tailor the appearance of the card to match your brand's style, enhancing user interaction. This flexibility makes it a great choice for showcasing products effectively.

What are the best practices for writing custom CSS for the Hover Card?

When writing custom CSS for the Hover Card, keep your styles modular and specific to avoid conflicts with other styles on the page. Use classes and IDs wisely to target elements without affecting others. Testing your CSS in different browsers can also help ensure consistent appearance across platforms.

What if I want to use script content instead of style content in the Hover Card?

If you prefer to use script content instead of style content in the Hover Card, you can refer to the tutorial on How to Use the Script Content With the Hover Card in Elementor. This guide will provide you with the necessary steps to implement script content effectively.

Last reviewed: April 11, 2026

Related Docs