Thank you for visiting us! We're continuously working to enhance our plugin and introduce exciting new features. If you have any questions or feature requests, feel free to reach out to us at plugin@instantpopupbuilder.com or contact us via live chat. We're here to help and look forward to assisting you!

Home » Blog » How to Open a Popup On Click or Hover Using a CSS Class

How to Open a Popup On Click or Hover Using a CSS Class

How to Open a Popup On Click or Hover Using a CSS Class

If you’ve created a popup and want it to open when a user clicks on a button, content, or any element on your website—or even when they hover over it—this step-by-step guide will help you implement it effortlessly and open a popup with On click on On hover function.

Step 1: Create Your Popup

First, ensure you have created a popup using Instant Popup Builder. By default, the popup will display on page load unless you’ve selected a different trigger. To set it up to open on click or hover, follow these instructions:

Step 2: Configure the Trigger On Click or On hover

  1. Go to General Settings:
    Navigate to the General > Triggers section in your Popup of Instant Popup Builder.
  2. Set the Trigger Rules:
    Under the Trigger Rules, click the dropdown menu and select either:
    • On Click
    • On Hover
  3. Generate the CSS Class:
    Once you’ve selected your desired trigger, click the + button. This will generate a CSS class, which will look something like this:
    instant-popup-trigger-001

Step 3: Add the CSS Class to Your Page

Now that you have your CSS class, follow these steps to add it to your page or post:

  1. Select the Target Element:
    Go to the page or post where you want the popup to open. Identify the button, text, or any element you want to trigger the popup.
  2. Add the CSS Class:
    • Select the element.
    • On the right-hand side, locate the Block Widget.
    • Scroll down to the Additional CSS Class(es) field.
    • Paste the generated CSS class (e.g., instant-popup-trigger-001) into this field.
  3. Save or Publish Your Changes:
    Once you’ve added the CSS class, click Publish, Save, or Update to apply the changes.

Step 4: Test the Popup

After completing these steps, visit your webpage to ensure the popup opens as expected when you click or hover over the designated element.

By following these steps, you’ll seamlessly integrate a popup that opens on click or hover, enhancing your website’s interactivity using Instant Popup Builder.

Shopping Cart
🔔
Scroll to Top