How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?

To recreate the hover-triggered pop-up effect like on Notion's pricing page in Webflow, you'll use interactions tied to hover states and absolute positioning to display a hidden info box near your element.

1. Structure Your Elements

• Add a parent div (e.g., Pricing Feature Item) for each feature or item that will trigger the pop-up.
• Inside this parent, add:
• A main visible feature element (e.g., an icon, label, or link).
• A hidden tooltip/pop-up div (e.g., Hover Info) that contains the extra info to show on hover.

2. Style the Pop-Up Element

• Set the pop-up div to Position: Absolute and place it relative to its parent wrapper (Position: Relative on the wrapper).
• Hide the pop-up by default using Display: None or setting Opacity: 0 and Pointer Events: None.
• Optionally add Styling like background color, padding, drop shadow, etc., to match Notion’s appearance.

3. Create a Hover Interaction

• Select the parent wrapper (e.g., Pricing Feature Item).
• Go to the Interactions panel, choose "Element Trigger: Hover".
• On Hover In, create a new timed animation:
• Set the tooltip's display to block (if it was set to none).
• Animate opacity from 0 to 100%.
• Optionally add scale or movement for a smooth transition.
• On Hover Out, reverse the settings:
• Animate opacity from 100% to 0%.
• Optionally add a delay before setting display to None to ensure the fade-out finishes cleanly.

4. Position the Tooltip

• Adjust the top/left/right/bottom values based on how far you want it to appear from the trigger element.
• Use Z-index to make sure the pop-up appears above other content.

Summary

Build each hover pop-up by nesting an absolutely positioned div inside a relative wrapper, then use hover interactions to toggle its visibility and opacity. This mirrors Notion’s approach for showing extra info on hover.