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

Показать описание

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

———————
© 2022 Mavi Design

Mavi Design

Рекомендации по теме

Комментарии

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.

rexblaze

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

lisahe

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!

roshimushin

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

anukrititripathi

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.

thiagodmxtube

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

williamm

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

Ervino_rainy

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.

danielhahn

14:00 important part for nested instances

wSz.

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.

akshatha

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?

claireszeto