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
- Go to General Settings:
Navigate to the General > Triggers section in your Popup of Instant Popup Builder. - Set the Trigger Rules:
Under the Trigger Rules, click the dropdown menu and select either:- On Click
- On Hover
- 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:
- 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. - 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.
- 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.