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

this UI element is called a tooltip and in today's video I'm going to show you how to create an interactive component like this in figma you'll be able to choose directions and using component properties you'll be able to set up the text that will show up when you hover over this UI element if you'd like to save time building this interactive component in figma make sure to check the link in the description below I will take you to my store now let's see how this is created in a figma the first thing we're going to do is use a text tool to create a sample text field it's going to be way smaller like 18 pixels aligned to the left and we're going to go for Avenue next Demi bold then I'm going to press shift a to create an ALT layout I'm going to add padding of about 20 pixels and add a fill that's going to be black so zero I'm going to also reduce the opacity of this fill to about 50 and then change the color of the text to White I'm going to also make sure this text is a bit longer so let's write down this is the text that shows up when when you hover over this interactive component and of course I'm gonna shrink this a little bit and then click on the text and say fill container under horizontal resizing then I'm going to rename this Frame to say text and maybe we're going to decrease the font weight to medium the font size to 16 and maybe go for like 65 in the fill opacity but overall though this is something we want to achieve so we want to have a text feed like this that will change height when you adjust the width to make it a bit responsive like this for now we're just gonna set this to 250 pixels and move on to the next step which is selecting the polygon tool and creating a triangle then pressing command e and setting the color of this triangle to black as well with the same opacity and that's 65 percent so as you might have guessed this is going to become our little pointer that will point to our question mark right so I'm going to rotate this and I'm just going to shrink it a little bit like this command X click the text field and command V you can see that it showed up over here which obviously you don't want that so we're going to go over here to Absolute position and then you're gonna Center this vertically and then move this triangle over here and then just keep pressing the arrow until you get this you know so exactly the right edge of this triangle is gonna right it's gonna meet it's gonna meet these edges are gonna meet right here this we need to I think go for like 16 pixels in height and then maybe in eight pixels in width something like that maybe a bit more in with the width like this you're gonna make this subtle but not too small right we're gonna make sure that under constraints this polygon is going to be center with the vertical alignment and left with the horizontal alignment reason is when we do this we want this triangle to stay right here right because if we set it set this up to be constrained to the right side I will show you what happens and obviously we don't want this so we're gonna make sure this says left and I'm gonna rename this polygon this triangle to two Arrow underscore left I'm gonna duplicate this three times and then I'm gonna select the second one and say Arrow underscore right I'm gonna press shift H to flip this horizontally and align this the right edge of this field and then I'm gonna again use arrows on my keyboard to position it like this I'm gonna also make sure these constraints are set to right and center and then I'm gonna select the third one rename this one to Arrow underscore top I'm going to rotate this 90 degrees clockwise and then Center it horizontally and align to the top vertically and then again use my arrows and you can see that figma is very smart actually and under constraints it automatically set this up to say Center and top which is exactly what we want because if we again change the sizes you can see that this arrow is staying in one one single place so that's that's great that's exactly what we need and finally the last Arrow I'm going to name that to Arrow underscore bottom I'm going to rotate this 90 degrees counterclockwise Center rate and align to the bottom move 16 pixels I'm sorry 9 pixels and then again you can see that under constraints this already happened if for some reason this didn't happen for you just make sure that this says Center and bottom this one says Center top this one right center and this one left center right so now if we take this text Auto layout and do this you can see that these arrows are gonna stay in their place what I'm gonna do now is Select this text thing that we've created the whole alt layout and then turn this into a component I'm going to select the top arrow and then go under layer over here and go for a create Boolean property this Boolean property is is going to say we don't even have to fill in anything show Arrow underscore top we're gonna create the property something similar with this Arrow right here create new property show Arrow right and then again here create property show Arrow bottom and then finally create your property show Arrow left additionally I'm going to select the text tool and under content I'm going to create a new text property that will say text and click create property this will allow us to do one very important thing and that is when we use an instance of this component of this text component we can now select which arrows are going to be visible under these controls right here and additionally we're going to be able to change the text simply like this right and you can see that if we just put in some nonsense text right here and change the size of this automatically you can see that these arrows function properly because of all the things we set up right here so that's good for now I'm just gonna reset all changes and now we are actually ready for creating our question mark so I'm going to use the text tool and click over here and type in a question mark like this right I'm gonna go for maybe Demi world I'm gonna select this and print press command shift o to convert this into outlines and I don't know how big should this be I think we could go for like this size all right so seven by eleven for example we're gonna create an ellipse Circle that will be 20 by 20 pixels let's see if that seems like the proper size and we're gonna just do this and I think this size seems about right yeah the fill color is going to be like 70 opacity something like that I'm gonna group this or actually I'm gonna turn this into a frame and I'm gonna do that by pressing command option G right so we have a frame and we can call this Frame question mark and what I'm gonna do now is Select this question mark frame and create a component from this this component is going to have eight variants in total so I'm gonna create a variant right here I'm going to make this way bigger because it needs to be it's gonna we're gonna need to room for all of our eight variants and I'm going to take these two and then duplicate these so that means alt or option and drag I'm gonna duplicate these three times right so we have eight variants in total I'm gonna also rename this component to Tool tip and then I'm gonna think about what instances of this component of this text component we're gonna need for each of these variants so you even though we have eight variants we will have four main groups of variants and these are tool tips that will be showing the text on the top bottom left and right side of the question mark which means I'm gonna have to reflect that in my instances of this component so I'm going to use these switches over here to reflect that fact so with the first one I'm gonna I'm gonna turn on this arrow on the bottom only with the next one on the top I'm gonna have to do a few attempts on that then again duplicate this and then one on the right side and then one on the left side means that we're gonna we're gonna have to move these a little bit down we're gonna need a lot of space now I'm gonna select the first variant I'm gonna select the first instance right here and press command X select this variant and then press command V so this happens but we don't want this to be centered like this we're gonna we're gonna make sure this this is what happens right the bottom edge of the text instance and the top edge of the question mark instance these are gonna be very close but they're not going to be touching so let's let's leave like two pixels spacing maybe four right so it's very close and then I'm gonna just go over to constraints right here and now this is very important we have to set the horizontal one to Center and the bottom one so the horizontal one the vertical one sorry we're gonna have to set that to bottom actually why because when we change the text we wanna we want this component to be glued to the top Edge because if we again if we did top right here and then we change the text so change the text to multiple rows this would happen and we don't want this to happen right so I'm gonna go back I'm gonna first of all reset all changes well not not all of them so I'm gonna have to hide these again again move it like this and now we can see why we need this to be Center and this to be bottom we can now add text and we don't have to be afraid that it's going to mess up our component and I'm just gonna select this and paste it right here all right so with same settings again Center and bottom completely same thing and now we're gonna we are ready for setting up this one command X on this component and then pressing this variant and command V moving it over here and adding a few pixels like this and again constraints very important we need to set this to Center and in this case that's going to be top because again when we now add some nonsense text you can see that this will start extending over to the bottom and that's something we want select copy and paste right here I'm going to select the select these two and then move them so that it looks better like this left one command X command V over here align it like this to the left side make these edges touch add four pixels and in this case what needs to happen here is this actually needs to be glued to the right side horizontally and to the center vertically because again if we add this text it's going to extend the way we would like copy paste right here I like these two and move them here and finally select this command X select this one command V move it all the way over here add four pixels left and center and then copy and paste over here perfect now we actually need to rename these com uh rename these variants so that we actually understand what we have created so this variant is going to be called top this one's going to be called bottom this one's going to be called left and this one's going to be called right based on what's the position of the text bubble right so and this one is going to be called top underscore hover this one's going to be called bottom underscore hover is one left underscore hover and this one right underscore hover we're actually now going to take a step back and rename these again because I've just realized it would be better to organize it a slightly different way so I'm going to select these two variants and then rename both of these to top then bottom and then these two are going to be left and these ones are gonna be right this will create an alert that these are conflicting properties uh we will we're going to fix that I'm gonna first of all rename this variant property to Direction and then I'm going to actually select the component right here and create a new property that will be called hover and the default value will be no but in this case with these four that I am selecting right now the hover is going to be yes and this will remove our conflicting property alert I'm going to also select the component again and then on the properties I'm going to click on expose properties from nested instances and I'm gonna click on text right here and then I'm gonna actually select select each each of these text components within the tooltip component in these top four variants and I'm gonna set the opacity the layer opacity to zero so they're not going to be visible right and then I'm gonna go over to prototype select the first one and connect that to the SEC to this question mark and it's going to say while hovering change to Direction top and hover yes smart animate is out 140. then something similar here while hovering or right something similar here while hovering and finally here while hovering right now we could also organize this a little better so I'm just going to move this closer together like this just so that we can save space and move them over here and decrease size of this overall component now let's test what we've created I'm gonna go over assets and I'm gonna search for tooltip and then create an instance right here and this tooltip first we're going to select a Direction so we're gonna go for left you can see that the hidden text appears to be on the left side so that's good news when we switch over to bottom it should appear on the bottom side and right so you can see it is there but it's just hidden so we're gonna this one's gonna be bottom I duplicated this component this one we're gonna go for left and this one we're gonna go for right and also with all four of these actually we're gonna have to go one by one we're gonna change this text to test so gonna be say test test write test top and test left then I'm gonna use the frame tool and create a frame around these or name this test frame this Frame is going to be 1000 by 600 I'm gonna select these four and then move them over to the center and we're gonna launch our prototype and see what we've created and if it actually works and here is the result if we hover over each of these you can see that the text appears on the correct side of the tooltip and also it reflects what text we typed in in this specific instance so we can now change this if we now change this to a you know longer copy so let's say this is a tooltip text and the direction of this component is top meaning the bubble is being shown on the top side of the question mark right so we've added a lot of text to this component and you can see that if we hover over this now it will reflect the change and also make sure it's still positioned correctly on the correct side and the correct distance considering we've made this significantly longer and this works with all of these so test right right side of the text bubble you can and modify these easily so we can see that it's gonna update the text so this is the final result so this is the tooltip interactive component if you'd like to download the source file for this and use it in your own projects make sure to check the link in the description that will take you to my store and thank you for watching all the way to the very end if you found this tutorial useful please leave a like and let me know in the comments if you'd like to see more similar content like this more interactive components thank you for tuning in and I will see you in the next one

Channel: Mavi Design

Views: 12,611

Keywords:

Id: juKxZL6Rcfo

Length: 17min 53sec (1073 seconds)

Published: Fri Oct 14 2022