Hover trigger
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
- You list one or more CSS selectors.
- When the mouse pointer moves onto a matching element, or anything inside it, the trigger checks its conditions and the trigger-time rules.
- 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 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.