Stop wasting your time with tooltips with Tooltip Wrappers!

Learn how to use a tooltip wrapper to avoid a lot of conflicts, and avoid a lot time wasted while placing or linking the tooltips with particular elements.

Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.

.
👉 Follow me on LinkedIn and Twitter for more content.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥

[alejandroamsel]

Thanks a lot for this video! The most annoying thing for me about the tooltips was the extra space they take if I don't absolute the position for them, and you took that point straight away, YOU ARE AMAZING!

[diogopacheco]

Dude, let me just tell you the most important characteristics of your YouTube videos that I appreciate so much and make you stand out from the crowd:
Myself, and every Designer in the world that strives to get better at it, consumes a lot of content, and YouTube is our library, so I'm your "Persona", or at least, one of them. So I'll give you user-feedback to help you out:

1 - You go straight to the point. (Maybe this will change when your channel grows, but for now it's top-notch) 90% usable information is really amazing. I can´t skip your video, and that says a lot! :)

2 - Super useful tips and tricks that someone ALREADY working in UX and using Figma could need. Most content is for fresh beginners, not a lot for mid-range experienced Designers.

3 - You focus on Speed, and productivity. This is what makes and brakes real-life Designing work: TIME. Everything that saves time improves our skills as Designers. We talk about just a few seconds of saved time, but repeated Thousands of times in a day amounts to a huge difference for the best.

I've discovered you only now, so I've still to watch all your content, but will do in the next month or so, for sure.
Hope my two cents helped you in some way. If not, just take on the praise and use it as fuel for your endeavors.

Cheers man

[AMDesignAndDev]

Here's my official Figma paid course which you can check out on:
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.

[SofiaSS]

Always impressed with how much you teach me! Thanks

[shibambiswas]

Ohh God.. I was searching for this all day long. Thanks Brother. ❤️

[bestproductchannel]

Cool tip. I should consider this in my next project. Keep up the good job you are doing.

[CaylisMalania]

Thanks for this great tutorial!! When it comes to replacing the button with a different component, I'm having trouble getting the tooltip to be centered on the new component. I remade the component and made sure autolayout was on top center, resized the larger component the same way you did in the video (fixed width for "Tooltip wrapper", "fill container" for new component), etc. but can't figure it out. What am I doing wrong/what should I be doing to make sure it centers on the new component regardless of size? Thank you!

[diogopacheco]

Really, really valuable tips and knowledge man. 😊 I appreciate what you’re doing. 👍🏼 thanks

[gversuti]

Man, your video is the only one I've seen all day which not only goes straight to the point, but actually is concerned with integrating the element into an ACTUAL LAYOUT. Even Figma's official channel has a video about tooltips that looks pretty amateur from my point of view (they teach the basics without considering how it will fit into the layout where you place the object afterward)

[aidadaist]

Thanks again! As always, a very helpful tutorial. Keep it up ;)

[SlimKhmissi]

You're my hero man! Thanks a lot keep going!👍

[djashawe]

Hi, Thanks a lot for the tooltip wrapper tutorial which was very useful. At 6:10 I just can't seem to figure out how you put the text field into the button. I watched it so many times, but I couldn't figure out how you can just replace or paste the text field into where the button is. Help would be much appreciated. Thanks. 🤓👍

[TorneloChess]

Hi! Long time fan, first time writer. How do I make the tooltips appear on top of everything else? If I use the component in complex frames, it ends up being hidden under near by components, even thought the layer with a tooltip is higher than the surrounding layer. Is there a way around it?

[danielamorue]

The power of of interactive components

[lambisstratoudakis]

Amazing your channel. I have some problems when i try to replace a component. in that case the tooltip is not anymore there. Have to do with the naming of the components and variants?

[okishan]

One problem with absolutely positioning the tooltip will not function well if we want it appear BELOW the element. If the element in focus is of different size, then the component will not follow the 16px space that you designed.

[sarojgurung]

So does this kinda mean its a two step process in a way? Because it seems that you have to use the tooltip wrapper component to bring the tooltip first. Then change the component from button to input field.

[roeldekkers]

nice tutorial! one problem, when i try to change the tooltip text on the right direction, it automatically alligns to the right and causes a lot of spacing between the two elements. Do you know how i can fix this?

[moransotto]

Hi, thanks for your video!
I followed your instructions in the video, but when I make a Tooltip Wrapper to the right or left - when I edit the text in toltip it hides the button content :( Is there a solution for this?

[abulut]

You're a hero. But the only thing is, the tooltip cant be a instance in this method because the 'content' field doesn't show up in Figma when I try to use a instance of a tooltip