Component
Text Selection Tooltip in Framer
This is a recreation of Florian’s text selection tooltip in Framer. Built with a few components and smooth transitions, it’s light, clean, and easy to customize. Remix the project and see how effortlessly you can bring micro-interactions like this to life in Framer.
About the resource
To create this text selection tooltip in Framer, I used multiple components, but mainly a text component with two variants — not selected and selected. When the text is clicked, it switches to the selected state, and the tooltip smoothly fades and scales in.
The tooltip itself has nested frames with hover states, and the arrow has an interaction to slide between two variants. There are two groups of tooltip content: one is relative by default and the other is absolutely positioned with overflow hidden, so only one is visible at a time. On the slide variant, their positions swap to create that clean sliding effect.
About the resource
To create this text selection tooltip in Framer, I used multiple components, but mainly a text component with two variants — not selected and selected. When the text is clicked, it switches to the selected state, and the tooltip smoothly fades and scales in.
The tooltip itself has nested frames with hover states, and the arrow has an interaction to slide between two variants. There are two groups of tooltip content: one is relative by default and the other is absolutely positioned with overflow hidden, so only one is visible at a time. On the slide variant, their positions swap to create that clean sliding effect.
About the resource
To create this text selection tooltip in Framer, I used multiple components, but mainly a text component with two variants — not selected and selected. When the text is clicked, it switches to the selected state, and the tooltip smoothly fades and scales in.
The tooltip itself has nested frames with hover states, and the arrow has an interaction to slide between two variants. There are two groups of tooltip content: one is relative by default and the other is absolutely positioned with overflow hidden, so only one is visible at a time. On the slide variant, their positions swap to create that clean sliding effect.
The text + tooltip component and tooltip coponent with its variants and click interactions.
The text + tooltip component and tooltip coponent with its variants and click interactions.
The text + tooltip component and tooltip coponent with its variants and click interactions.
Once I had these two components ready, I used multiple instances of the text + tooltip component to form a sentence, where each word is its own component. Then I added variants for each text component and connected them using click interactions, so each word toggles between its selected and not selected state individually.
Once I had these two components ready, I used multiple instances of the text + tooltip component to form a sentence, where each word is its own component. Then I added variants for each text component and connected them using click interactions, so each word toggles between its selected and not selected state individually.
Once I had these two components ready, I used multiple instances of the text + tooltip component to form a sentence, where each word is its own component. Then I added variants for each text component and connected them using click interactions, so each word toggles between its selected and not selected state individually.
The six variants of the text selection tooltip component.
The six variants of the text selection tooltip component.
The six variants of the text selection tooltip component.
