How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?
TL;DR
- Add a tooltip div near your icon, absolutely position it relative to a parent, and hide it by default with
display: none. - Use Webflow's Mouse Hover Interactions to show the tooltip by setting
display: block, animating opacity and position, then hide it on hover out by reversing those steps.
To recreate the on-hover popup effect seen on Notion’s pricing table (where tooltips appear when you hover over icons), follow these steps in Webflow using Interactions and a bit of styling.
1. Set Up the Static Content
- Add a Container (like a pricing column or a feature row).
- Inside the container, insert an Icon or small image that will trigger the popup (e.g., question mark).
- Add a Div Block that will serve as the hover popup tooltip. You can name it something like
Tooltip.
2. Style the Tooltip Element
- Position: Absolute — Make sure the Tooltip is absolutely positioned relative to a parent with Position: Relative.
- Initial Display: None — Set the Tooltip to
display: noneso it’s hidden by default. - Add padding, background color, border-radius, box-shadow, or any other styling to match Notion’s clean UI.
- Set a max-width if the tooltip text is long.
- Use a higher z-index (e.g.,
z-index: 10) so the tooltip appears above other content.
3. Set Up Interactions (Hover In/Out Triggers)
- Select the Trigger Icon (e.g., question mark icon).
- Go to the Interactions panel, click +, and choose Mouse Hover.
- Under "On Hover", choose Start an Animation and click + New Timed Animation (e.g.,
Show Tooltip). - Inside the animation:
- Add a “Set Display” action: set the tooltip to display: block.
- Add a “Opacity” action: start at
0%, and animate to100%over200ms. - Optionally, add a Move animation to slide the tooltip in from above or below slightly, similar to Notion.
- For "On Hover Out":
- Create another animation (e.g.,
Hide Tooltip). - Animate Opacity from 100% → 0%, then
- Set Display to None at the end of the animation.
4. Adjust Positioning Responsively
- Use Webflow's breakpoints to ensure the tooltip position works on tablets and mobile.
- Consider using hover-click fallbacks if mobile support is needed, as hover doesn’t work on touch devices.
5. Optional: Reuse with Symbols or Components
- If you want this effect to appear throughout a pricing table, convert the tooltip/icon pair into a Component to reuse easily.
Summary
To create Notion-style hover tooltips in Webflow, place an absolute-positioned Tooltip div near your icon, hide it by default, and use Mouse Hover Interactions to animate its visibility and position. This enables clean, responsive popup effects without custom code.