---
title: Hover trigger
slug: hover-trigger
description: How the Hover trigger works in Personizely: CSS selectors, firing when the mouse moves onto an element, behavior on touch devices and when to use Click instead.
image: https://archbee-image-uploads.s3.amazonaws.com/1y1Fr-DMGy_apx7FwibyA/ORDTWfNKMXiY3ZRv0QSgP_personizely-docs-og.png
docTags: 
createdAt: 2026-10-16T20:13:45.726Z
---

The Hover trigger shows a widget when the visitor's mouse pointer moves onto an element that matches one of your CSS selectors. Use it for hints next to a menu, a product badge or a pricing table, where moving the mouse there signals interest.

**Available on:** all platforms.

## How it works

1. You list one or more CSS selectors.
2. When the mouse pointer moves onto a matching element, or anything inside it, the trigger checks its conditions and the trigger-time rules.
3. If they pass, the widget is shown immediately. There's no hover delay.

Elements added to the page after it loaded are matched too.

## Configuration

| Option                                 | What it does                                                                                                                                                    | Values / default                |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| CSS Selectors                          | The elements that show the widget when hovered                                                                                                                  | One or more selectors; required |
| Conditions: Time spent on current page | Only fire if the visitor has been on the page more (or less) than N seconds; optionally the total time on your site in this session, including the current page | Optional                        |
| Conditions: Max scroll reached         | Only fire if the deepest scroll on this page is more (or less) than N%                                                                                          | Optional                        |

## Behavior details and limitations

- **Touch devices have no hover.** Most mobile browsers treat a tap as a hover, so a tap on the element can show the widget, but don't rely on it. Add a [Click trigger](https://docs.personizely.net/click-trigger) with the same selector for mobile visitors.
- **It fires on the first pass.** Moving across the element on the way to somewhere else is enough. Pick elements visitors move onto deliberately, and consider a condition such as "Time spent on current page more than 10 seconds".
- **The page keeps working.** Unlike the Click trigger, hovering doesn't cancel anything on the page.
- **One show per page.** After the widget has been shown, the trigger stops until the next page load.
- **Focus.** When the widget closes, keyboard focus returns to where it was before the widget opened.
- **No selector, no trigger.** Without a selector the trigger never fires and the browser console shows "No selectors specified."

## Examples

- **Shipping info callout:** hovering `.shipping-badge` shows a callout with delivery times.
- **Pricing help:** hovering `#compare-plans` shows a short "Need help choosing?" callout with a link to chat.

## Related

- [Triggers overview](https://docs.personizely.net/triggers)
- [Click trigger](https://docs.personizely.net/click-trigger)
- [Callout widgets](https://docs.personizely.net/callout-widgets)
- [Mobile behavior](https://docs.personizely.net/widgets-mobile)