Designing A Responsive Tooltip System in Unity

Tooltips are a fundamental part of Game UI design but it can be tricky to make them look good, let's take a look at how to design a smart and responsive Tooltip system that will resize and position itself on screen relative to its content!
Thanks to Kenney for the Assets! www.kenney.nl/...
Creating A Debug Cheat Console: • Creating a Cheat Conso...
Creating a UI Line Renderer: • Creating a UI Line Ren...
Making UI that Looks Good: • Making UI That Looks G...
--------------------------------------------------------------------------------
Want to support the channel?
▶️ Help fund new episodes by joining the Patreon - / gamedevguide
Use these links to grab some cool assets from the asset store:
Get the Must Have Assets! - assetstore.uni...
Free Unity Assets! - assetstore.uni...
New on the Asset Store! - assetstore.uni...
Top Paid Asset Store Packages - assetstore.uni...
Asset Store Partners - assetstore.uni...
--------------------------------------------------------------------------------
Socials and Other Stuff:
• Subscribe - www.youtube.co...
• Join the Discord - / discord
• Twitter - / gamedevguideyt
• Facebook - / gamedevguideyt
• Instagram - / gamedevguideyt

[@DamageSoftware]

Great guide! I modified a little the logic that sets the pivot of the tooltip in order to position it relative to the mouse cursor depending of the screen quadrant. private void Update() { var position = Input.mousePosition; var normalizedPosition = new Vector2(position.x / Screen.width, position.y / Screen.height); var pivot = CalculatePivot(normalizedPosition); _rectTransform.pivot = pivot; transform.position = position; } private Vector2 CalculatePivot(Vector2 normalizedPosition) { var pivotTopLeft = new Vector2(-0.05f, 1.05f); var pivotTopRight = new Vector2(1.05f, 1.05f); var pivotBottomLeft = new Vector2(-0.05f, -0.05f); var pivotBottomRight = new Vector2(1.05f, -0.05f); if (normalizedPosition.x < 0.5f && normalizedPosition.y >= 0.5f) { return pivotTopLeft; } else if (normalizedPosition.x > 0.5f && normalizedPosition.y >= 0.5f) { return pivotTopRight; } else if (normalizedPosition.x

[@shaytan992]

Thanks for this, tooltip positioning is much better than the original code alone!

[@AllDayBikes]

me: "huh thats a thumbnail I don't remember --oh new game dev guide video, finally!" I've binged the others too many times in the last 2 months haha

[@FireJojoBoy]

lol same

[@smally5739]

The UI god, understanding the rectransform class and other ui components has been one of my biggest challanges with unity tbh, and there's very little resource on this, thanks for the tutorials!

[@JasonSmith-jv7wl]

I gotta say, toggling on and off a layout element to handle sizes smaller than your max size is just genius. So many projects at work I have written complicated code to do the same thing, but this is just so much easier. I didn’t actually care about the tooltip system when watching this, (I’ve coded up similar systems a lot) but it is gems like the layout element trick that made me want to check this out. Great problem solving there.

[@reggieisnotadog4841]

Great tutorial! I learnt a lot. If anyone is looking to get this a bit more 'mouse snaps to corners of cursor to stay on screen' rather than have be based on screen position average, the below might be helpful to you in place of the rectTransform positioning bit of the tutorial: Vector2 position = Input.mousePosition; float pivotX = position.x / Screen.width; float pivotY = position.y / Screen.height; float finalPivotX = 0f; float finalPivotY = 0f; if (pivotX < 0.5) //If mouse on left of screen move tooltip to right of cursor and vice vera { finalPivotX = -0.1f; } else { finalPivotX = 1.01f; } if (pivotY < 0.5) //If mouse on lower half of screen move tooltip above cursor and vice versa { finalPivotY = 0; } else { finalPivotY = 1; } tooltip.rectTransform.pivot = new Vector2(finalPivotX, finalPivotY); tooltip.transform.position = position; ---------------------------------------------------------------------------------- SMOOTH TWEENING IN UPDATE: If you want the above to move smoothly rather than completely snap you can call a DoTween sequence to position it in the Tooltip's update (just be sure if you do this, to kill the tween sequence if already running and then again on hide or you'll get wonky behaviour). Sorry, I don't know LeanTween but I'm sure you can do the same with it. So in the update of the tooltip itself I replace the "tooltip.rectTransform.pivot = new Vector2(finalPivotX, finalPivotY)" bit with: finalPivot = new Vector2 (finalPivotX, finalPivotY); if (rectTransform.pivot != finalPivot) { moveSequence.Kill(); moveSequence = DOTween.Sequence() .Join(DOTween.To(() => rectTransform.pivot, x => rectTransform.pivot = x, new Vector2(finalPivotX, finalPivotY), .5f)) .Join(DOTween.To(() => rectTransform.pivot, y => rectTransform.pivot = y, new Vector2(finalPivotX, finalPivotY), 1f)) .SetRelative(false) .Play(); } moveSequence is a DoTween Sequence variable I declared at the top of my code Hope that helps someone!

[@chengkuangyu]

Thanks for the solution, great topping on the original version.

[@megatinystudio8111]

Exactly what I was looking for, thank you!

[@spartythespart]

thanks i was thinking the exact same thing and this code worked perfect for it

[@abo1428]

„It‘s LEANTWEEN time“ 😂 Great video as always! Hope to see a new video soon

[@Devsplorer]

I couldn't track how those 9 minutes passed, the explanation was so smooth! Great video, thanks for sharing 😊

[@travlake]

If I'm not mistaken the 3:54 layoutElement.enabled trick requires manually matching your chosen characterWrapLimit to your chosed preferredWidth in the Layout Element. An easy way to avoid this is using "layoutElement.enabled = Math.Max(headerfield.preferredWidth, contentField.preferredWidth) >= layoutElement.preferredWidth; " instead

[@treymtz]

Goated comment for saving me some time thinking about something slightly annoying, but not annoying enough to deal with later

[@rasmusskovbo7572]

Great guide! Something you didnt touch on that i used myself: If you want to add the tooltip to objects at runtime (e.g. for inventory items instantiated from a base of Scriptable Objects), you can use AddComponent and set the title, content, etc afterwards with info from the SO.

[@mortum2614]

Came here for ToolTips... stayed for all the layout element tricks. Finding this video made my week!

[@olpacheco]

One of the best tutorials I ever seem! Thank you, man!

[@Only4GamersXyz]

Hello, How to use LeanTween.delayedCall when game is paused (Time.timeScale = 0f)? Because tooltip is not appearing when the game is paused.

[@Pedro_Marangon]

3:54 another way of doing line 24 is to just set the layoutElement.enabled to the condition to be true (since if the conditions are true, then it sets to true and the opposite happens too), like: layoutElement.enabled = (headerLength > characterWrapLimit || contentLength > characterWrapLimit);

[@frithjofmeinke7789]

That actually bothered me too.

[@binaryparrot3352]

I paused the video there to find this comment. It annoyed me too much.

[@travlake]

Or layoutElement.enabled = Math.Max(headerfield.preferredWidth, contentField.preferredWidth) >= layoutElement.preferredWidth; This has the advantage of obviating the "characterWrapLimit" parameter, which is annoying to calibrate. Instead it just uses the LayoutElement's preferred width you set.

[@zoltan9498]

Agreed. no need of using ternary operator here

[@userAS456]

@@zoltan9498 need, becouse if component disabled all responce from him is null.

[@jowsey]

Hey, I doubt you'll see this but I just wanted to say this is by far my favourite game dev channel on KZbin. You make everything so clear and easy to understand, and cover so many bases and edge-cases that others usually wouldn't. Thank you so much for this, you've helped me a ton.

[@GameDevGuide]

Thank you so much for the kind words! I'm glad you find the videos useful. ❤️

[@WesleySales1]

The wait is always worth it. Thank you very much for all these GREAT Game Dev Guide tutorials!

[@MohammadFaizanKhanJ]

I developed a custom tooltip system long ago but I was unaware of how to manage its pivot according to the screen width. Your video save me thanks matt.

[@mrcreepypl]

Honestly though, how the f*** do you not have a milion subscribers already!? I really don't get it, your videos are much higher quality than Brackeys (in my opinion).

[@genericmeme]

Are you sure you're not just biased because Brackeys mostly targets(/targeted...) total beginners and this channel doesn't?

[@danielstone4713]

This is a huge puzzle piece for the project I'm working on, with such a clear and concise explanation. Thank you so much!

[@wildKawa]

Thanks for the tutorial. This might be personal preference but the visual cuts are a biiiit fast for me. Stopped counting how often i had to stop the video just to see what was happening. I like that it doesn't waste a lot of time but especially the drag and drop stuff is hella fast.

[@Malaron2]

I had to slow it down to half speed. Makes it more entertaining also since it sounds like a drunk person is explaining programming to you. (due to slow speech) :P

[@jeffreyjumisko5165]

I'm often blown away by how beautifully made you videos are. Excellent instruction. Thank you!

[@chengkuangyu]

I Had developed something similar to this before, but your solution is way more elegant and cleaner. Great Job!

[@vitiet8229]

At 3:57, line 24, it's better to use layoutElement.enabled = headerField.preferredWidth > layoutElement.preferredWidth || contentField.preferredWidth > layoutElement.preferredWidth; As you're comparing the preferred size of TMP to the Layout Element preferred size rather than arbitrary text length which does not work for when you use special TMP features such as HTML color or Sprite asset. Hope this helps.

[@MaximumSpice]

Fantastic tutorial, super well spoken, edited and the code + explanations are great man! Will be implementing this tonight!

[@rickloyd8208]

Dynamic pivot was awesome solution, thanks for the truck!

[@docien7342]

your UI videos are always fantastic. doubly so because it can be a bit hard to find actually useful UI info sometimes!

[@seanloughran6714]

This was awesome. I hate UI/UX, so hard to do right, but you make it look simple!

[@GamesBySaul]

This has been incredible! Thank you so much for making it! :D I love how you explain extra things such as doing it for gameobjects or how to get information for what text to display, it's greatly appreciated :)

[@martynawasiluk1405]

Thank you! This came at JUST the right time - I've been putting off implementing tooltips to my game, and this is a MUCH better way than the one I've been using so far. I love it! Thank you! Please keep doing these.

[@thehab]

You, my friend, are some kind of sorcerer! Absolutely banging video. great content. Thank you so much! SUBBED.

[@cesargamedev716]

I developed a system with tooltips for a card game that's currently in steam when I worked in it but with all of this I think I'd make a better one using this knowledge, really awesome!

[@ginoantenucci6424]

I went through alot of diffrent tutorial and all the features that this one had and boy is this easier Very underaterd

[@TrueIndian]

its LeanTween time - one more useful video! Thanks

[@MrMrn87]

This man is a hero we don't deserve

[@EllieHatesCake]

Sure this will be useful to someone... it sets the pivot of the tool-tip so it is positioned next to the mouse. This keeps it on the outside of the tool-tip at all times, so you can clearly read the text. Similar to how it is displayed at the end of the video. Vector2 position = Input.mousePosition; float x = position.x / Screen.width; float y = position.y / Screen.height; if (x = 1 - y) //right Rect.pivot = new Vector2(1.1f, y); else if (x = 1 - y) //top Rect.pivot = new Vector2(x, 1.3f); transform.position = position;

[@1mortale]

Thank you for your comment. I can confirm it works

[@tabbycatgames31]

Thank you a lot !

[@apemant]

Thanks!

[@VegaP6]

this looks great, thank you!

[@Brademmerson]

This is exactly what I needed, and your video arrived just in time. Thanks man!

[@huseyin.goktas]

Thank you. Simple, elegant, and useful. Making clear UI is very important for a successful game.

[@Apc7th]

Your Channel is doing the Lords work. ty

[@Pedro5antos_]

Awesome, awesome, awesome!! Your tutorials are next level, thanks, buddy!

[@legitchrisv]

For those whose Tooltip image/text shows on Start, keep the Tooltip canvas active before playing, but turn off the Tooltip GameObject. When you hover over the items, the tooltip will show and hide when you exit. This will stop the Tooltip from showing when you start playing and are not hovering over anything.

[@Hymnal27]

Great video, I really appreciate your concise editing!

[@pandaengine]

Definitely gonna use it someday! I'm currently building a game for mobile, so it may be unnecessary. Tho I still learned something. I didn't know that you can use content size fitter to adjust the recttransform automatically. Definitely a helpful thing. Keep up the great work man.

[@LION303200]

there are some missing info's in the video, after the pivots / screen, which moves whenever the cursor get close to screen edges, and then at the end of video suddenly the tooltip still in the next cursor ? idk how?

[@synamardo]

Still a wonderful guide. Thanks a lot!

[@150zero150]

4:33 If your copying the code over, be sure to keep the "static" on the Show(), I was getting a CS0120 error for a bit.

[@MewzikMaker]

I was having trouble getting the tooltips to show on non-UI objects, eventually discovered this was due to me using unities new input system. The solution was to add a physics raycaster component to the camera. Now pointer events (such as OnPointerEnter/OnPointerExit) can be called on non-UI objects without needing OnMouseOver() and OnMouseExit() in the tooltip trigger script.

[@SwagGrandma]

Thank you for sharing your solution to this!

[@herlantmajor5883]

Never saw that kind of like/dislike ratio, well deserved :)

[@TheBritishSwans]

Really nice video, will definitely be one I keep referring back to whenever I want tooltips :D

[@VaupellGaming]

Lovely video, enjoyed this. Thanks.. one note i found.; new inputsystem takes 2 lines.. get the inputsystem and read the value ;) ohh and the value is a vector3 not 2. Using UnityEngine.InputSystems; get the value as such. Vector3 position = Mouse.current.position.ReadValue();

[@bischoffdev]

Hi, instead of using a ternary operator, you can simplify it like this: layout.enabled = headerLength > characterWrapLimit || contentLength > characterWrapLimit;

[@ludwintor4986]

Hello! Can you make a tutorial in which objects in a layout group move smoothly, and not just jump after removing or adding an element?

[@OwenTheProgrammer]

as a general programming tip, if you are going to do anything life (statement) ? true : false, the statement itself returns true or false so the code: layoutElement.enabled = (headerLength > characterWrapLimit || contentLength > characterWrapLimit) ? true : false; can be: layoutElement.enabled = (headerLength > characterWrapLimit || contentLength > characterWrapLimit);

[@NightMareJP99]

Lmao, the LeanTween time cracked me up. Btw nice tutorial

[@Solanaceously]

Great as always Matt

[@alyo7774]

Thank you! So crisp and useful!

[@Only4GamersXyz]

2:54 tooltip image not adjusting height in my case if disabling header or content object. Any idea why this happening? I watched videos 10+ times, i can't find anything that I missed. 🙏🙏🙏

[@mrcryptographic4803]

You need a source image and the image type Sliced in the tooltip.

[@LuRybz]

Amazing work! Thank you for sharing!

[@LilayM]

I'm actually using this in my current prototype, thank you

[@PeterJohnson76]

I've followed this and have no errors in my code however the tooltips wont appear? Or if I enable the canvas in the inspector the tool tip is permanently showing. I get errors object reference not set to instance of object, making reference to current.tooltip.gameObject.SetActive(false); in the Tooltipsystem script

[@andreperegrina]

If someone else is using the new input system and trying to OnPointerEnter on a sprite, you have to add a Physics 2D Raycaster to your camera and a collider to the sprite

[@xAjido]

Couple issues/thoughts. When my tooltip first enables and shows up on the screen, something looks off about it. Almost like it's enabling first then repositioning which I can notice. The other minor thing is the content/header strings in the TooltipTrigger script should have the [TextArea] header for easier entering and formating of information.

[@masterkonni0594]

Great video👍, love the ui series.

[@serj_1264]

Thank you very much for sharing all these amazing contents.

[@mnnm1989]

5:53 was just wondering, why does your inspector show a textfield for the content? do you use some special inspector or is there a tag for it? thx

[@jenskendl7408]

Great video - as always!

[@AllDayBikes]

Yuh' Know, I was skeptical of LeanTween because I hate using packages that I didn't make. But Between this, and the fade with Leantween.alphaCanvas. It was super easy to do compared to writing my own coroutines or learning invoke etc... Thanks again

[@negativegamer8781]

Awesome video ! I actually ended up making something very similar for Ludum Dare 50 this week-end. 🤣

[@martynawasiluk1405]

How did you do the fade animation? I've been trying to get it to work with LeanTween, no success yet.

[@GameDevGuide]

Put a canvas group on the component and use Leantween.alphaCanvas

[@martynawasiluk1405]

@@GameDevGuide Thank you

[@michele6064]

@@martynawasiluk1405 can you help me please? what i have to do?

[@mnnm1989]

Wow, what a great tutorial. Really well done and thanks a lot :)))

[@Light-wz6tq]

1k likes, 0 dislikes, *visible great content*

[@vasil-yt]

Love the UI videos

[@ghostriley22]

Very helpful!! Thank you mate!

[@CodemasterJamal]

This is a good tut. I could use this.

[@CyberStudios]

Thanks this was very helpful!

[@joshuacantie2007]

How is he able to get a margin on the left and right of his text with the Content Size Fitter? I keep trying to rearrange my canvas image but the text is still really close to the edges. EDIT: He added a padding of "10" to each element in the Vertical Layout Group, just saw that.

[@veselos27]

Thanks for the video, it helped a lot!

[@Merivio]

Also using static means Unity can't serialize it, so if you modify code and have Unity hotswap it while the game is running, you'll lose the tooltip reference. A fix for this is to put current = this inside Update() as well.

[@Koltayy]

what a nice tutorial, ty for the great content :D

[@ajeybharat]

you deserve more likes.

[@runedova126]

Is it possible to use buttons over the text. I'm currently working on something in Unity and want the player to be able to interact with objects in the game world. So for example when they hover their mouse over something instead of getting the canvas image with the text, is there a way to present them with 2 or 3 button choices? Great Video.

[@STARasGAMES]

Amazing video. Love it!

[@srivatsajoshi4028]

Great video. Commenting for the algorithm

[@OnlyEsquite]

This is amazing. Thank you!

[@Eculeus007]

Celebrate your success of your tutorial! ;) If you could do a tutorial about the country lines, like 0:36 , that would be great.

[@joymagine]

nice easy concise thanks alot great stuff thanks

[@simonallen6274]

[Multiline()] is how he got the bigger text area in the editor, just above public string content; in TooltipTrigger script. You can see it at 8:05 in the video. When I got to transform.position = position; in the Tooltip script, my tooltip disappeared. What happened was that I was using a camera to put the overlay to fit game screen, so the tooltip was appearing miles away for some reason. Once I put the Tooltip Canvas -> Canvas component -> Render Mode back to SCreen Space - Overlay, it was fine. I had to reset the transform value on the tooltip too to put it back where it should be. There's probably a proper way to make it work with a screen space overlay set to camera, but it worked with that little fix anyway.

[@IIMyLittlePonyII]

I'm so glad I found your videos! Question though... I mainly deal with Mobile games. Is there a solution you'd recommend for Mobile? Would love to see a video on Mobile solutions for common problems like these

[@FalcFalcFalcFalc]

excellent tutorial, thank you

[@demyanrudenko]

That ternary operator at 3:53 hurts my soul, ngl

[@rootth7113]

Just AWSOME

[@whiterabbit6133]

Really excellent videos!

[@JulienNix]

I had no idea all these helpful layout and resize components existed. I recently created a basic tooltip system for my game but I spent hours writing scripts to handle everything. Facepalm.

[@JessicaGalvan93]

I'm trying to figure out how did you do the offset from the mouse after changing the pivot thorugh code, cuz between 7:49 and 8:45 the tooltip firts shows right in the middle and under the mouse while afterwards it has a slight offset from the mouse that it's waaay better.

[@JessicaGalvan93]

The rest of the video was really interesting (thought I did skip the LeanTween cuz I haven't used it yet and.. when I did import it to the proyect, it broke a lot of it so... maybe in another one)

[@RedEyedHawk1]

I'm using Unity 2021.3.2f1 and so much of the UI components have bugs in them now. I can't get the IPointerEnterHandler (or the Exit handler) to work.

[@sspyrshlsx3740]

No dislikes Perfection

[@Besttechnology]

1:50 there is any tutorial to make a camera movement like that with the mouse?

[@mateuszpatua3016]

simply the best!

[@incpwnge]

Hi. First of all great video. Thank you for the effort. I was wondering if you are using LeeaTween free version or not in these couple of UI videos. I saw two other scripts in the scripts folder, what are those two for?

[@vishuu528]

Where to put the code of InputSystemUIInputModule at 6.30? need proper explaination for that please

[@greenbear9790]

This is awesome!

[@MixerlolxD]

Are resource icons from Kenney too? I am trying to find them or some other for prototype purpose.