Made some cool tooltips

Made a cool tooltip class for my current project, utilizing the BABYLON GUI.

I finally got around to it and simplified it a bit, removed hard-coded things, made stats dynamic (with a setup function)
All included in the PG;

The tooltip class should be the last gui element added to the ADT to always be on top.
Read the code :pray:, play around with it, I hope the naming explains the majority.

tooltip.setupStats( [ “A”, “B”, “C”] ); // needed once after tooltip creation.
tooltip.update(name, quality, iconUrl, itemCategory, itemType, stats, gold, description, footNote) x, y); // pixel positions of upper left corner of the tooltip.

In the update function, the “stats” argument is an array that matches the setupStats
[ “value of A”, “value of B”, “value of C” ], they can be numbers or strings, null or 0 will make that stat not display.

No PG as it’s all tied up in hard-coded stat and item types, aswell as static values i use within in my project.

But maybe it’ll cause some inspiration, i’d love feedback too!

Slightly(cough) inspired by a popular MMORPG.

Populated with dummy values :smiley: and the icon will be changed ofc


Looks good - how did you get the potion description to go down a line since it would overlap with “consumable” - did you measure the text or is there another way?

1 Like

Hi @brianzinn
I actually used nested StackPanels

The item type on left ( cloth, etc ) and equipment/use type on the right, is a horizontal StackPanel nested within a vertical StackPanel for stats, which again is nested within a main vertical StackPanel that includes a top container for the icon & title and at the bottom the description, gold value and the footnote are added to the main StackPanel.

Anything that isn’t used for a given item is hidden with control.notRenderable = true;

1 Like

Looks great, I’m actually in the process of integrating items into my project also. It would be invaluable help if you would/could share your project :slight_smile:

Feedback wise, there is not too much to say as it mostly looks pretty tidy and hierarchy is respected:

  • one thing is unclear, is what does 12 constitution mean for example, is it a cost? is it an effect?

In all cases, great job!

1 Like

Yes :+1:, …you could also have used grids inside your stackpanels. But overall this imbrication of containers is (in my opinion) basically the way you build a complex responsive and dynamic GUI with the BJS 2D GUI. May I add here that I also found that the ‘Editor’ is a pretty good tool to use to better understand this sort of ‘imbrication’.


The style remembers me of many games I played from RTS to RPGs. But how do you solve the issue with positioning? Do you calculate absolute left and top (+offset) at i.e. hovered button? My old project used this tooltip design:

But it causes issues, because it needs to wrap around hovered button and z-index can be problematic with other tooltips/hovereds.

Exactly, when a button is hovered.

//on gui button (el) hover
tooltip.update(...); // item data,, el._currentMeasure.width, el._currentMeasure.height);

show(x = 0, y = 0, offsetX = 0, offsetY = 0){
        this.container.isVisible = true;
    else {
        let _this = this;
        this.icon.onImageLoadedObservable.addOnce(() => {
            _this.container.isVisible = true;
setPosition currently waits one render and before updating the left & top properties 
(Needs to measure the new height)

I sorted the z-indexing by adding the tooltip directly (and last) on advancedDynamicTexture, other UI parts are separated in simular sub-containers, (lobbyUi, gameUi, tooltipUi)

( Messed up the design for now, excuse that :slight_smile: )


In my case, constitution is just a health stat :slight_smile:

I won’t be sharing it at the moment, but i might do it in the near('ish) future if i get the time.
i simply don’t have the time to update it to be dynamic right now nor supply support for confusing parts of the code

Looking great! :smiley:

Update; Included PG with tooltips!