Dynamic Tooltip in Unity! (Resizable, Follows Mouse, Edge Detection)

in this video we're going to make a tooltip in unity it will automatically scale to fit whatever text you give it and it will always stay on screen even as you mouse over the edges let's begin hello and welcome i'm your code monkey and this channel is all about helping you learn how to make your own games with in-depth tutorials made by a professional indie game developer so if you find the video helpful consider subscribing okay so i actually made a tooltip in a video previously and that one still works great however in that one i was using a camera for the ui in this one we're going to be using a screen space ui so there's no camera also in that one i use the old unity text and in this one i'll be using text mesh pro also if you've seen the chat bubble video then this should be very familiar since that element also involved resizing the background to match the text alright so here's what we're going to build over here is my tone tip and the first thing is that the background is dynamically sized to fit whatever text you give it so right now it's matching perfectly and right now the tone tip is constantly updating with a bunch of random characters and you can see that no matter what text i give it the background always matches perfectly so i can set it to whatever text i want it works with horizontal and also with vertical text so making a tooltip with line breaks works perfectly since we're working with text mesh pro it is very easy to add some colors and extra information to our tone tip another thing about this helmet is how it doesn't leave the screen so as i mouse over the right side yep it always stays inside the screen same thing if i go upwards yep it's always visible and since the whole thing works dynamically i can also dynamically modify the font size and yep everything updates perfectly so decrease increase change the bone change so on and everything works perfect so here it is a very versatile simple tooltip this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone alright so this is our goal let's get to it okay so here i am in my empty scene let's begin by going into the canvas and let's create an empty game object so let's call this the tone tip screen space ui and now inside we're going to need two things a background and some text so let's add a new ui image for the background and over here let's anchor it to the left side so the way you also set the pivot is by holding down shift so hold down shift and click down here and yep now it's anchored on the lower left corner and just put the x and y straight at zero okay all right so that's the background now the size itself will be set dynamically so whatever we set here doesn't really matter and then let's create the text so a new ui we're going to select text on text mesh pro name it our text and once again anchor to the lower left corner and in here instead of putting it straight right there on the edge let's give it a little bit of a breathing room all right so just like that so i set the width and height both at zero and then down here set wrapping to disabled overflow to overflow then align to the left and lower right corner okay so here we have our basic tooltip setup we have a background image and a simple text now let's make the script a handout so in uc sharp script call this once again the same thing tone tip screen space ui drag the script to our parent and let's open it okay so here first things first let's make a basic private void awake then awake let's grab a reference to the background so we're going to grab a rect transform so we find the background and get the component all right then for the text mesh which again is using text mesh pro so using tm pro and then down here we can set of type text mesh pro you guy all right there it is so here we have both of our references now let's make a function to set our text and here all we do is go into the text mesh pro in order to set the text and to our tooltip text okay so just like this we should be setting the text field and up here on the wake let's do some testing so set text and let's say something okay let's test and if there's our tone tip with the text all right so far so good now after setting the text we also need to dynamically size the background so let's do that the way we modified background is access the background direct transform and modify the size delta so this is a vector 2 and in here we need the text size so for that let's go up here to grab a vector 2 for the text size and we go into our text mesh in order to get the rendered values and let's include all of our characters alright so just like this we have the text size now this sometimes might cause some issues depending on when the text updates so we can make sure that it always updates by going into the text mesh and call for smash update so just make sure that it works all the time okay so we have the text size and just set it on the background pretty simple all right let's see and yep there's the text with the background with the exact size right so far so good now let's do a more thorough test by setting some random text all right so i've made this simple test function it creates a function periodic which is a helper class from the utilities that you can grab for free from unitycodemonkey.com essentially this is going to trigger an action on every certain amount of time so this action will be triggered every half a second and in this action first we are defining a sort of dictionary then a base text message and then we just apply some randomness get a random number of characters and choose a random character from this string so this should let us test to make sure that our tone tip works with any text okay so let's call this up here and let's test and if there is a tone tip and regardless of what random text we set it it always has the perfect size and here we're automatically getting the rendered values from the text so for example if we modify the text size so let's put it much small let's say at 20. and if there you go now our tone tip is much smaller so very easy very adaptable however you can also see that the text doesn't look completely right the thing is that the background is 100 perfect so it matches perfectly with whatever text we give it however in order to make our text look a bit better we gave it some breathing room on the left and lower corners so it would be nice to add a little padding both on the left side and on the right side so let's do that down here in our set text function we get the text size let's also define a vector 2 for the padding size and just define some values now here we offset the actual text object by 4 4 so essentially double that so in here let's put it at 8 8. again this is just visual so you can put whatever padding you want including just zero so we set the size double to the text size plus our padding let's see and if there's a tone tip and now it doesn't look 100 perfect so the background correctly matches whatever text we give it and again since we're grabbing the text size directly from the text mesh it also works with new lines so here in our string let's just randomly add a bunch of new lines and let's see it and yep there it is and you can see regardless of how many new lines and how many characters we add yep it always looks perfect so the background perfectly matches whatever text we give it awesome okay so with the background skill correct now let's make sure that it follows the mouse so here let's make a private void update and on our update let's grab the rec transform from this parent game object so let's grab direct transform we cache it here on awake just transform get component of the rack transform and then down here we take our rect transform and modify the anchored position and let's put it at the input.mouseposition so this is the current mouse position in pixel coordinates let's see and right away we see some issue well that's because the input mouse position has a origin on the lower left corner whereas our transform has an origin right on the center so let's quickly change that so we select the parent game object and down here instead of anchoring it on the center anchor on the lower left corner okay let's try and yep now it is falling closer to it however it's not falling perfectly so as i move away you can see the tone tip is actually getting further away now the reason for that has to do with how the canvas is scaled so here in the editor we can see the setup and we can see that we have a canvas and here in the inspector we can see the various stats so we have a canvas of type screen space overlay okay so far so good and then here we have the canvas scaler this one is set to scale with the screen size and it has a reference resolution of 720p and it's set to match fully on the height so what this means is that if we open up our game window as i move the game window as the height increases or decreases it automatically scales all the objects so you can see in here that the canvas does have a scale and there you go it's not 1 1 1. so as i make it smaller yep get smaller as i make it bigger it gets bigger so this is why our tooltip isn't following it perfectly we just need to use these values in order to make our calculations so back in our tone tip we're going to need a reference to the canvas right transform so let's add it as a serialized field okay there it is now in the editor here we can just drag the canvas straight onto it now you can also just dynamically find the canvas or use a serialized field whatever each way works and now here we go down to our update and we are setting the anchored position to the mouse position and then we divide it by the canvas rack transform and we're going to access the unlock scale and now this one the scale is uniform so we can use any of these vector3 values so just divide by the x all right so let's test and yep now the tone tip does indeed follow the mouse perfectly so right there you can see the mouse is always perfectly positioned right awesome so our tone tip is looking great however there is one issue which is if i go into the edge of the window yep there you go now the tone tip is no longer visible so if you had a button right here in the corner this would not do so let's fix our code to make sure it always stays on screen so here on our update before we set the anchored position let's first validate it so let's first grab a vector 2 for our anchored position and we start off with this one and then we validate it and then we use it okay now here to validate it so we're going to make a simple if take our anchored position and let's first worry about the x so we take the anchor position x and then we add on to it the background direct transform we're going to add the width so the width of our background and if those two added are bigger than the canvas rect width if so then the tone tip has left the screen on the right side so if so let's push it back a bit on the left side all right so that will make sure that doesn't leave on the right side and let's also fix the same thing on the top all right so we do our validation and then we set it okay so this should do it let's test okay there's our tone tip following the mouse and if i mouse over the right side if there you go as soon as it gets there it no longer goes away off screen and the same thing if i go upwards yep there you go it does not go away all right awesome so now our tone tip is always visible no matter where the mouse is positioned okay so we have our fully functioning tone tip now let's just add a couple more useful features so first let's add a basic static instance and then a function to show and hide all right pretty basic just two static functions so they're very nice and easy to use and then the show tone tip and the high tone tip they simply set the game object to active or inactive and simply set the text and by default up here when we awake instead of setting the text let's simply hide it now let's make a quick testing script all right so just a basic testing script attached to an object and just calling the static function so as you can see this class is very easy to use let's see and yep there's the tone tip only working all right now one more thing let's make it work with a delegate all right so i had this function which takes a system func so this is a delegate which is going to return a string now if you're not familiar with delegates check the video link in the description so it takes this delegate which returns a string with our actual tooltip text and then in here we simply store it and we set the text based on the return value of that string so it stored here as a member variable and down here on our update we're always doing set text and get the string so what this does is it allows us to create dynamic tone tips so back in our testing script let's make a func to give it all right so here for testing we create our func this will return a string and then a timer variable and on update we're constantly increasing that timer then we tell it to show this total let's see okay so here's our dynamic tone tip it has a static portion of text and then a dynamic timer that is constantly updating so for example this is really useful when you want to show a tooltip for example displaying some sort of skill cooldown and since we're working with text mesh then for example adding colors is very simple so we can just add the color tag so here it is just adding some color tags and yep there's the fully working tooltip and again this is all very dynamic so with the tooltip text selected for example let's make it in bold and yup the size updates let's decrease the size and yep it's perfect doesn't leave the screen let's put it much bigger and yep there you go it fully works all right so here is a really awesome really robust tone tip element it is smart enough to dynamically resize it based on whatever text you give it so this is pretty much essentially for making any sort of game that is mouse heavy alright so here it is if you found this video helpful consider liking and subscribing this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone as always you can download the project files and utilities from unitycodemonkey.com subscribe to the channel for more unity tutorials post any questions in the comments and i'll see you next time

Channel: Code Monkey

Views: 24,002

Keywords: unity tooltip, unity tooltip follow mouse, unity tooltip on mouseover, unity mouse text, code monkey, unity item tooltip, unity tutorial, unity game tutorial, unity tutorial for beginners, unity tycoon, unity rts, unity 2d tutorial, unity 3d, unity, game design, game development, game dev, unity management game, game development unity, unity 2d, unity 3d tutorial, programming, coding, c#, code, software development, learn to code, learn programming, unity tutorials

Id: YUIohCXt_pc

Length: 15min 6sec (906 seconds)

Published: Sat Aug 15 2020