How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?
TL;DR
- Structure your elements with a hidden, absolutely-positioned tooltip div near the hover trigger and style it appropriately.
- Use Webflow’s interactions to animate the tooltip’s display, opacity, and position on hover in and out, ensuring responsiveness by adjusting for touch devices.
To recreate the on-hover pop-up effect like on Notion's pricing page, you’ll need to use Webflow interactions to show a hidden element when a user hovers over a specific area.
1. Build the Structure
- Add a Div Block for the hover trigger (e.g., “Info Icon” or pricing feature).
- Insert a second Div Block inside or near it for the pop-up content (the tooltip).
- Style the pop-up div:
- Set Position to Absolute (relative to a parent with Position: Relative).
- Set Display to None initially.
- Add padding, background color, border radius, box shadow, etc., for tooltip styling.
- Position it above or beside the trigger element.
2. Add the Hover Interaction
- Select the trigger element (e.g., Info Icon or feature text).
- Go to the Interactions panel (lightning icon).
- Click + next to Element Trigger and choose Mouse Hover.
- Under On Hover, choose Start an Animation.
- Name it something like Show Tooltip.
3. Create the “Show Tooltip” Animation
- Under animations, click + Timed Animation.
- Select the tooltip (pop-up) div from the Navigator or canvas.
- Click Add Action > Display > Block.
- Add a Opacity animation: Set to 0%, then animate to 100% over 0.2–0.3s.
- Optionally include Move (e.g., move from Y = 5px to Y = 0px) for a smoother entrance.
4. Create the “Hide Tooltip” Animation
- Under On Hover Out, choose Start an Animation.
- Create a second animation called Hide Tooltip.
- Add Opacity from 100% to 0%, and then a Display: None at the end with a 0.2s delay.
- You can also add a subtle move back if you used one on entrance.
5. Make It Responsive
- Check hover functionality on various screen sizes.
- On touch devices, consider using click or tap interactions instead of hover.
Summary
To replicate Notion's hover pop-up effect in Webflow, use a hidden div styled as a tooltip, and control its visibility with hover-based interactions, changing its display, opacity, and position. This creates a smooth, professional-looking hover effect that reveals additional info on pricing or features.