---
title: "Hover Trigger - EngageBox"
description: "The \"Hover\" Trigger fires when the visitor moves their mouse over specified element(s). Below you can find how to set up a popup with \"Hover\" trigger,"
url: "https://www.tassos.gr/docs/engagebox/triggers/hover"
date: "2026-04-21T06:34:08+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Triggers ](https://www.tassos.gr/index.php?option=com_content&view=category&id=50)

#  Hover Trigger

 Hover Trigger is available in Pro  Unlock this and dozens of other powerful features by upgrading to EngageBox Pro.

 [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe)

The "Hover" Trigger fires when the visitor moves their mouse over specified element(s). Below you can find how to set up a popup with "Hover" trigger, all supported settings for this trigger explained as well as how to trigger it with the JavaScript Events API.

## [How to create a hover popup in Joomla](#how-to-create-hover-popup-in-joomla)

To set up your popup to trigger on *Hover* go to your popup settings > Behavior Tab > Trigger Section and apply the following settings:

- Under the *Trigger* section, select **Hover**.
- Set the *Trigger Element* by specifying the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma.
- Lastly, set the delay of the trigger by entering a number in milliseconds in the *Delay* setting.

[![engagebox trigger on hover settings](https://www.tassos.gr/images/2025/09/engagebox-trigger-hover.png)](https://www.tassos.gr/images/2025/09/engagebox-trigger-hover.png)

## [Trigger Settings](#trigger-settings)

Below you can find all settings that are configurable when you choose the "Hover" Trigger.

 | Setting | Value | Description |
|---|---|---|
| Trigger | Hover | Fires when the visitor moves their mouse over specified element |
| Trigger Element | .myElement | Specify the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma.       Example 1: .item-100, .item-101   Example 2: #logo      Keep in mind that query selectors must always begin with an underscore (\_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers |

| Delay | 0 | Delay trigger in miliseconds. Leave 0 for immediate execution or enter 2000 for 2 seconds delay.       If the trigger point is set to onElementHover then this value is used to delay or prevent the accidental firing of the popup and attempts to determine the user's intent. It is recommended to use at least 30 ms. |

## [Use Cases](#use-cases)

### [Open popup when the user hovers over any element on your page](#open-popup-when-the-user-hovers-over-any-element-on-your-page)

A use case would be to have an element on your site where you need to display some information about that particular element. This way a popup will appear with the information that you want to display.

## [Frequently Asked Questions](#faq)

### [How to Trigger using JavaScript](#trigger-using-javascript)

Using the JavaScript Events API v2, you can configure any popup to be triggered using the "Hover" Trigger. Below you can find a JavaScript snippet:

 ```
EngageBox.onReady(function() {
    // Get box instance
    const box = EngageBox.getInstance(5);

    box.bindTrigger('onHover', {
        trigger_selector: '.myDiv'
    });
});
```

You can read more on the JavaScript Events API documentation, [Hover Trigger](https://www.tassos.gr/joomla-extensions/engagebox/docs/engagebox-javascript-api-2#onHover).

 Hover Trigger is available in Pro  Unlock this and dozens of other powerful features by upgrading to EngageBox Pro.

 [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe)

 Last updated on Sep 9th 2025 13:09

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Triggers",
            "item": "https://www.tassos.gr/docs/engagebox/triggers"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Hover Trigger",
            "item": "https://www.tassos.gr/docs/engagebox/triggers/hover"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/triggers/hover"
    },
    "headline": "Hover Trigger",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/engagebox/triggers/hover"
    },
    "datePublished": "2020-05-16T12:23:33+03:00",
    "dateCreated": "2020-05-30T09:22:49+03:00",
    "dateModified": "2025-09-09T13:53:15+03:00"
}
```