How To Create a TOOLTIP (Hover to Show Text) Component in Figma (Tutorial)

Рет қаралды 35,502

Жыл бұрын

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Get the SOURCE FILES for this project ($1.99): payhip.com/b/rDZys
In this interactive component tutorial, we will be creating an interactive, adjustable tooltip (hover to show text bubble) component in Figma. We will be using component properties and hover states to achieve the result. You will be able to select the direction from a dropdown menu and add text (variant property and text property) when using an instance of this interactive component. Impress your clients with fully interactive Figma prototypes including an interactive tooltip that shows text when you hover over it! This component is great for web, UX and UI design.
Topics: interactive components and prototypes in figma, tooltip in figma, hover to show text in figma, components and variants
SUBMIT YOUR DESIGNS: forms.gle/XLEGmnEZMjopq3C68
VISIT MY STORE: bit.ly/mavi-design-store
-------
© 2022 Mavi Design

Пікірлер: 27

@roshimushin 8 ай бұрын

Absolutely amazing tutorial / video. Honesty I found this more helpful than most of the actual tutorial videos because it was something that I wanted to create in the first place. Thanks so much!

@Ervan_rainy Жыл бұрын

the video that you provide is very helpful and makes work easier, thank you for sharing.

@riccemorales9647 4 ай бұрын

Thank you for this, Mavi!

@anukrititripathi152 13 күн бұрын

A lot , a lot of thanks, respect to ur efforts and content 👍🏼

@osipreciosa Жыл бұрын

Oh man, you just saved my life ❤

@user-xk8ks4wv8k Жыл бұрын

Thanks so much, you are the best!

@bennystuehler 8 ай бұрын

very helpful, thank you!

@user-in8yh9xj5s Жыл бұрын

you are so good

@danielhahn7523 10 күн бұрын

I am stuck at the auto layout. Pressing Shift+ A does not bring up a menu where I can adjust the auto layout. The problem is, that I can only change layout (padding, etc.) in a Stack. I assume Framer has been updated since the video was recorded.

@rexblaze4 Жыл бұрын

Excellent guide. One thing to note, the 'Expose nested instances' feature is only in open beta as of Feb 2023 but that can be easily worked around by just selecting the hidden text bubble.

@mavidesign Жыл бұрын

Great point! That might explain why some of my other videos get comments saying this option is nowhere to be found 😅

@Mahor74 28 күн бұрын

thanks mr I'm gonna

@akshatha4549 7 ай бұрын

This was very helpful indeed, but if I may add something the part where the actual hover feature was explained went very fast and I couldn't follow or keep up, I am a beginner in figma but I know my way around Adobe XD pretty well. I find Figma has complicated a simple feature like hover which can be easily done in XD in just two steps.

@thiagodmxtube 3 ай бұрын

Now make the ? icon clickable. There's no way to do it, Figma don't let you have a while hovering and click action on a same instance. This "bug" is reported on the forums since 2001 with no solution.

@wS21z. 2 ай бұрын

14:00 important part for nested instances

@izeseato9965 7 ай бұрын

I can't paste a component inside another component in figma

@aaj9722 4 ай бұрын

constraints are not showing up..

@zelialai 10 ай бұрын

For some reason, my auto layout is not responsive... why is that happening?

@claireszeto1798 Жыл бұрын

Forgive me if I'm missing something very important in variant procedure (I'm a beginner) - why is it necessary to have the first versions of the text box if it is merely 0% invisible/passthru? Why not just have 1. question mark 2. variant #2/hover state +paste text box?

@mavidesign Жыл бұрын

Oh that's a very good question thank you - actually it's not necessary but in this case more of a force of habit from my side. When you animate movement (and not just visibility), you need to have the object present in the initial state as well as the final state. Then, smart-animate knows where to move the object from position A to position B. Check out my Patreon if you'd like to join a community of designers looking to improve and share their creative journey (link in video description) 😊 Have a great day, Mavi

@piotrgasior3403 Жыл бұрын

If you remove text box from the first state you will loose the ability to overwrite the default text using Text Property on the right side. Text box has to be present in all states even if invisible (or inherited from other component) in order to use right panel overrides.