Component
Footer Tooltip Interaction in Framer
This is a recreation of Eduard’s tooltip micro animation in Framer. Built with five components, it’s simpler than it sounds. Feel free to remix the project and see how easy it is to create such interactive animations in Framer.
About the resource
To create this component, I built a footer component that nests a menu items component. Inside the menu items component, I nested both the menu item and bars components—essentially, a component within a component. The menu item component has two variants (default and hover) to drive the hover animation, while the bars component manages the tooltip’s closed and open states.
Next, I wrapped the bars component in an additional container that stacks multiple bars, assigning a variant to each menu item. In this setup, the bars remain closed by default and open to display the tooltip text on hovering over the menu items.
Finally, I added mouse enter and mouse leave events on the menu item component to trigger the hover interactions.
About the resource
To create this component, I built a footer component that nests a menu items component. Inside the menu items component, I nested both the menu item and bars components—essentially, a component within a component. The menu item component has two variants (default and hover) to drive the hover animation, while the bars component manages the tooltip’s closed and open states.
Next, I wrapped the bars component in an additional container that stacks multiple bars, assigning a variant to each menu item. In this setup, the bars remain closed by default and open to display the tooltip text on hovering over the menu items.
Finally, I added mouse enter and mouse leave events on the menu item component to trigger the hover interactions.
About the resource
To create this component, I built a footer component that nests a menu items component. Inside the menu items component, I nested both the menu item and bars components—essentially, a component within a component. The menu item component has two variants (default and hover) to drive the hover animation, while the bars component manages the tooltip’s closed and open states.
Next, I wrapped the bars component in an additional container that stacks multiple bars, assigning a variant to each menu item. In this setup, the bars remain closed by default and open to display the tooltip text on hovering over the menu items.
Finally, I added mouse enter and mouse leave events on the menu item component to trigger the hover interactions.
The six variants of menu items and six variants of the bars component.
The six variants of menu items and six variants of the bars component.
The six variants of menu items and six variants of the bars component.
