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

Подписаться 49 тыс.

Просмотров 41 тыс.

50% 1

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Get the SOURCE FILES for this project ($1.99): payhip.com/b/r...
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/XLEG...
VISIT MY STORE: bit.ly/mavi-de...
-------
© 2022 Mavi Design

Опубликовано:

4 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 29

@sb2487 Месяц назад

Thank you so much for precise and clear explanation!

@roshimushin Год назад

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!

@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 😅

@Ervino_rainy Год назад

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

@anukrititripathi152 3 месяца назад

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

@riccemorales9647 7 месяцев назад

Thank you for this, Mavi!

@thiagodmxtube 6 месяцев назад

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.

@danielhahn7523 3 месяца назад

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.

@osipreciosa Год назад

Oh man, you just saved my life ❤

@akshatha4549 10 месяцев назад

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.

@williamm8460 Месяц назад

I'm not sure what went wrong with mine, but the polygon goes transparent when trying to move outside of the text frame 🤷🏻‍♂

@lisahe4258 Месяц назад

why is it that the Constraints panel isn't showing up when i click on the variant?

@bennystuehler Год назад

very helpful, thank you!

@OmotoyosiAdegbite Год назад

Thanks so much, you are the best!

@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.