On hover trigger

How to find an element’s ID or class name for the Hover trigger

Pop Convert now lets you show a popup when visitors hover over a specific element on your website, for example, a button, image, or product name.

To make this work, you’ll need to enter that element’s ID or class name in the trigger settings.

Here’s how to find it:

1. Open your website

• Go to the page on your website where the element you want to use is located.

Example:

If you want the popup to appear when someone hovers over the “Shop Now” button, open a product page.

2. Right-click and choose "Inspect"

• Right-click directly on the element (like the button or image). Then click Inspect (or Inspect Element).
• This will open your browser’s Developer Tools — usually on the right or bottom of your screen.

3. Identify the element's ID or class

• When you hover your mouse over parts of the code, the matching element on your site will highlight.

You’ll see something like this:

<div class="btn-action detail-attr qty-cart">

or

<div id="promo-banner">Black Friday Sale</div>

Here’s how to know what to copy:

• If it has class="btn-action detail-attr qty-cart", copy only the class name → btn-action detail-attr qty-cart
• If it has id="promo-banner", copy only the ID → promo-banner

4. Add it to your popup trigger

In Pop Convert:

1. Go to your Popup Settings
2. Open the Trigger Settings tab
3. Choose Hover
4. Paste the element’s ID or class name

💡 Tip:

• For class names, add a dot (.) before it → .btn-action detail-attr qty-cart
• For IDs, add a hash (#) before it → #promo-banner

So your trigger setup might look like:

.btn-action detail-attr qty-cart

or

#promo-banner

Extra Tip

If you want to make sure you’re selecting the right element, hover over different lines of code in the Developer Tools, the matching part of your website will highlight each time.

This helps confirm you’re copying the correct ID or class.

Updated on: 08/12/2025