📖 How to Open a Popup via On Click or On Hover Trigger (Free)

With Instant Popup Builder, you can display your popup when a user either clicks or hovers over a specific element on your site. This guide walks you through the simple steps to set it up.

Step-by-Step Instructions

1. Create or Select Your Popup

First, create a new popup or select an existing one.

2. Configure the Trigger

• Navigate to:
  Popup Settings > General > Triggers
• Choose one of the following:
  • On Click
  • On Hover

⚠️ Important:
You can only choose one trigger type per popup — either On Click or On Hover, not both simultaneously.

3. Copy the Generated CSS Class

After choosing your trigger, a unique CSS class will be automatically generated for your popup.

• Example for On Click:
  instant-popup-trigger-684
• Example for On Hover:
  instant-popup-trigger-756

Note: The number at the end of the class is unique to your popup. Your class will differ based on your popup ID.

4. Insert the Trigger Class into Your Page

Use the CSS class on any HTML element where you want to trigger the popup.

Example – On Click

<span class="instant-popup-trigger-684">Click here to open popup</span>

Example – On Hover

<span class="instant-popup-trigger-756">Hover here to open popup</span>

You can add these inside any HTML block, widget, shortcode area, or even in theme files.

 Tips

• Make sure your popup is published and not in draft mode.
• Test your trigger on both desktop and mobile to ensure compatibility.
• Use different popups if you want both click and hover triggers on the same page.

Need Help?

If your popup isn’t triggering as expected:

• Double-check that the CSS class matches the one from your popup settings.
• Ensure only one trigger type is set.
• Clear your site’s cache and refresh the page.