> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.popup-builder.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Open On click /On hover/On load Popup via CSS class

You can use our CSS class **sg-popup-id-1** (1 is your Popup ID number) to add **On click Popup** on pages, posts, etc on your site.

| CSS class can be used for any element if those give a possibility to add CSS class.

In this tutorial we have chosen to show how it can be used on a page.


**Required steps**:

1. Go to the **page** you want to insert the Popup.

2. Switch to the **Text tab**.

3. Paste the following **CSS class** - **sg-popup-id-1** (for On click) or **sg-popup-hover-1** (for On hover) inside your **HTML element**.

Ex. for On Click.  <span **class="sg-popup-id-1"** > Click text</span>
Ex. for On Hover  <span **class="sg-popup-hover-1"** > Hover text</span>

**Type your Popup ID number in the class**.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-page-wp_16xggzc.png)

4. From your Popup list select the Popup you would like to show when your visitors press the click text.

5. In the **Popup Display Rules** section, you can choose the **Selected pages** option and select the page where you have pasted the **CSS class**.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-popup-w_1sjsa4p.png)

6. You have opportunity to choose 2 events to trigger on click popup. 
* 1st one is to select the **Set by CSS class** event in the **Popup Events** section.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-popup-w-6_ao8mg9.png)

* 2nd one is to select the **On click ** event in the **Popup Events** section. This one has 2 options to trigger on click popup.
**Default added class **into your HTML element - sg-popup-onclick-1 (1 is the ID number of your created Popup, which can be changed according to the Popup).
**Custom class **which gives you an opportunity to set the proper  CSS class into your HTML element.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-popup-w-8_1lklkft.png)

7. You have an opportunity to set **On hover** event via **CSS class**. Here you have opportunity to select either **Default** added class or **Custom** class.

**Default** added class into your HTML element -  sg-popup-hover-1 (1 is the ID number of your created Popup, which can be changed according to the Popup)

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-popup-w-4_197urcu.png)

**Custom** class which again gives you an opportunity to set the proper  CSS class into your HTML element

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/edit-popup-w-5_1nxokbx.png)

**Examples with Page Builder Plugins of the site(s).**

Very often users have page builder plugins in their sites, and in this case, the CSS class adding differs a little.

Suppose you want to add an On click Popup on a Button element.

In this case, you should go to your Button module settings, find **Custom CSS** option and enter our **CSS class** (**sg-popup-id-1**, 1 is your Popup ID number) there.

**On click Popup** with **Divi Builder**:

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_1epei3t.png)

**On click Popup** with **Visual Composer**


![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_5b3q8g.png)

Here you can see the result of the **On click Popup** added via **CSS class**.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_l8vm43.png)