How can I make a tooltip for my inventory system?

I want to make a tooltip appear when I select a pet in my inventory, it would have information about what the pet is, what extra information it has etc. It would work kindof like minecraft does it, Example here:
image

The background of the tooltip would scale depending on what elements are in it automatically

The thing is, I don’t know how I could do that while also scaling the ui to other devices correctly such as mobile.

I could thereotically do it with offsets, but as said above I will run into the issue where the ui won’t scale to other devices.

I am trying to see if other people had the same issue as me and if they have a way of resolving it.

Also the ui design I have made.

2 Likes

you can use MouseEnter to detect if the mouse has hovered over the button or a frame, then make a GUI appear wherever you want or get the mouse position using Player:GetMouse()

I already know how to position the ui, I am asking on how I would automatically scale the background of the tooltip depending on the size of the elements which are in it, if for example the pet will not have any enchants then it will look really weird, and if I have too much elements in it then the elements will not be displayed on the white background and they will go off the main ui.


Example of this happening:

use a UIConstraint so the gui will resize depending on the size of the screen, and have you tried my MouseEnter solution?

I already know how I will position my tooltip ui.

Also a UIConstraint will not fix my issue as I have tried it before.

i’m not talking about the position of your tooltip ui; and it seems you already know how to make the gui appear

consider using an AutoScale plugin which aids me alot in fixing issues like these,
if problem persists i might have to take a look at your Explorer since arrangement could also be the issue

I don’t think that you know what my issue is. I am trying to change the size of the background depending on the size of the elements which are in it, while also scaling the ui for every device.

you have stated before that you have used UIAspectRatioConstraint and it “doesnt work” BECAUSE you didn’t utilize it properly. UIAspectRatioConstraints will rescale the parent GUI correctly according to the device so stuff like guis popping out of another gui/randomly resizing so big doesn’t happen. if you look at its properties there is something called AspectRatio which you have to modify for it to actually work.

and have you tried AutoScale plugin?

Do you know how the tooltip system in minecraft works when you hover over an item? I’m trying to achieve that with this and the uiaspectratioconstraint won’t solve that.

i’m aware that some of your buttons are a bit off/popping out of the frame :grinning: if uiaspectratioconstraint really doesn’t work then maybe read the last line of my previous post, it might be the solution

Yes I did try the autoscale plugin and I know how it even does it but it will only change the offset to scale and it will not take into the fact that I have other elements in the frame.

does the GUI look normal when on PC? how about on mobile?
you should consider rearranging your frames and guis in the explorer. most of the time having them unorganized (ex: button is not parented in main frame) can have issues like the one you have

I had bad experiences when trying to accomplish similar tasks using the UI modifiers…

So I did it many times using the “old way”. It works for any device size cause you’ll be using a percentage of each client pixels/absolute size.

This is just a basic example:
The tooltip has 5 elements in a vertical list?
Which percentage size you want each element occupy from the screen?
Get an absolute size in px of your client GUI or from its screen, use that to resize the element.
Use the sum of those 5 elements percentages or absolute sizes in px to decide the size of the tooltip container. And thats it, always looking nice on all devices.


Its not the easy way, but, pretty intuitive, and it gives you room to decide how/different sizes or not, you want to show those tooltips or anything.

Tedious… but I prefer to do it that way

3 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.