This is what we're gonna do:
As always, the file is available for free on my Patreon: patreon.com/posts/36903197
Tooltips!
The obvious requirements to having a tooltip system is to have some kind of UI system. I was tempted to reuse my gamepad menu example file, but I decided not to, because ProUI wasn't really all that necessary for this system.
Instead I setup a sprite with these instance variables and a Timer behavior for the button.
For the tooltip, I used 2 sprites and a text object. The text and the black sprite have the tween and the pin behaviors, while the main white sprite has 3 instance variables and only the tween behavior.
Initialising the tooltip
I used the shiny new pin behavior to pin position, angle and absolute size to the main sprite. By default, the tooltip is invisible and created on its own layer on top of everything else.
Opening and closing the tooltip
For this I setup two functions. Both use the tween behavior to tween the size of the tooltip and the opacity of the text and outline to get a nice opening and closing animation.
For the opening, I take a lot of parameters that are all provided by the button sprite from its instance variables.
Linking to the buttons
Now, to actually call these functions, I just needed a few lines that start a timer on button hover and closes any open tooltip. And when the mouse is not over a sprite anymore, it also closes the button
And then, once the timer is over, just call the openTooltip function
The only weird thing here is the x and y coordinates being passed
It's a debatable design decision, but I decided to have a single position being passed, and if the tooltip shouldn't follow the mouse, it's just the button's position + the offset, but if it follows the mouse, I only pass the offset.
Since tooltipFollowMouse
is a boolean, doing abs(Sprite.tooltipFollowMouse - 1)
is the same as doing a "not".
This is only one of the many ways to do this, so you can try replacing that system with something that makes more sense to you as an exercice if you want :)
Also, notice that in the function, followMouse
is a number and not a boolean. This is so I can pass it as an expression because in C3 boolean parameters cannot be passed with an expression: You need to check a box instead.
Following the mouse
Following the mouse is pretty easy once you have the offset. It's only a single line that runs on every tick:
And you're done. It wasn't that hard, was it?