How To Install The Hover Trigger Component

Learn how to install and configure the Hover Trigger component in Framer. This guide covers setup, properties, and troubleshooting for creating interactive hover-based popups that automatically adapt to mobile devices.

Quick Start

Make sure the PageOverlay component is active on the page - Insert PageOverlay at page level (outside frames) and set Active to "YES"
Insert Hover Trigger anywhere on your page - Add the component inside frames, at page level, or nested anywhere
Set minimum height - Configure height to at least 50px (0 disables the trigger)
Add popup content - Place your popup content in the Popup Content slot
Test in preview mode - Hover over the trigger element on desktop or scroll past it on mobile

Prerequisites

The Hover Trigger requires PageOverlay to function properly:

// PageOverlay must be installed and active for Hover Trigger to work
// PageOverlay must be positioned at page level (outside any frames)
// Both components work together - neither works without the other

Important Setup Notes:

PageOverlay must be positioned at page level (outside frames)
Hover Trigger can be placed anywhere - inside frames, at page level, or nested
Component automatically adapts to mobile with scroll-based triggering
Recommended minimum height is 50px for reliable hover detection
Hover may work laggy or delayed in preview mode - testing in browser/live site is recommended

Properties

Property	Description
Show on Canvas	Display the overlay on Framer canvas for customization
Popup Content	Slot for your popup content (frame, component, etc.)
Allow Retrigger	Enable multiple popup triggers on the same element
Retrigger Delay	Delay in seconds before allowing another trigger (0-60s)
Overlay Color	Background color of the overlay
Blur Amount	Amount of background blur effect (0-40px)
Scroll Lock	Lock page scrolling when overlay is active
Close Btn Position	Position of close button (inside/outside popup)
Close Btn Inset	Distance of close button from popup edge
Close Btn Size	Size of the close button (20-80px)
Close Btn BG	Background color of close button
Close Btn Icon	Color of close button icon
Animation	Animation effect when popup appears (zoom, fade, slide)

Troubleshooting

Issue: Trigger doesn't activate on hover

Check that the component has a minimum height of 50px. Set height to 0 to disable the trigger. Ensure PageOverlay is active and positioned at page level.

Issue: Popup doesn't appear

Ensure PageOverlay component is installed at page level and Active property is set to "YES". Check that popup content is added to the Popup Content slot. Verify the trigger element has sufficient height.

Issue: Mobile scroll trigger not working

This is normal behavior - the component automatically switches to scroll-based triggering on mobile devices. Test by scrolling past the trigger element on a mobile device.

Issue: Scroll lock not working on mobile

When the Hover Trigger is inside a frame (not at page level), scroll lock may not work on mobile devices. This is a known limitation with frame-based layouts.

Issue: Retrigger not working

Ensure "Allow Retrigger" is enabled and set a Retrigger Delay if needed. The delay prevents rapid successive triggers.

Issue: PageOverlay not working

Ensure PageOverlay is added directly to the page (not in a Framer template) and positioned at page level outside any frames.

Issue: Close button not visible

Check Close Btn Size and Close Btn BG color settings. Ensure the button color contrasts with your popup background.

Issue: Component not taking up space

Set the component to "Absolute" positioning to prevent it from taking up space on the canvas while maintaining hover functionality.

Component Doc

Quick start tutorial