TomaszFurca

Best way to create tooltip

Recommended Posts

Hi, yesterday i was start develop gui tooltips. Tooltips are show using events onPointerEnterObservable and onPointerOutObservable. Now I try to set container above base control (for example button).

Creating tooltips as parent of button I can't make my tooltip bigger than parent -> https://playground.babylonjs.com/#0HT3SZ#3

I think good way is creating tooltips as parent of main stack panel, but i have problem with absolute position of tooltip. It is shown below button, I can create tooltip before button and then it show above button, but then position of button has been changed. 

https://playground.babylonjs.com/#0HT3SZ#4
https://playground.babylonjs.com/#0HT3SZ#5

Tom

Share this post


Link to post
Share on other sites

https://playground.babylonjs.com/#0HT3SZ#6

Hi again TF!  I've been goofing-around.  I kept the button (and its buttonStack)... completely separate from label1/2 and their tooltipStack.  That way I get more control over placement of tooltipStack.

I put some "position work" into a scene.executeWhenReady() code-block - lines 52-64.  To get a useful buttonStack._measureForChildren.left/top... I had to wait-for "when ready" or else those values were 0 and 0.  :)  And _measureForChildren is not necessarly a good thing to use, or useful.  It's just something I discovered when using my in-browser object inspector... and it had some delicious-looking numbers to play-with.  heh

Inside a scene.executeWhenReady()... I now have good values for the buttonStack._measureForChildren values... showing 606 and 402 at the console. 

But, I am still thinking about HOW to use those numbers... to give you full control of tooltip placement IN-RELATION-TO the button which uses/has that tooltipStack.  In other words, I would like the tooltipStack to be positioned RELATIVE to the buttonStack, and easily, and micro-adjustable.  :)

Sometimes things are in pixels, sometimes in percentages, so I'm still testing/experimenting.  Currently, the tooltip popup is hard-set at 50px/50px in lines 59-60.  But above that line... you can see where Wingnut was experimenting.  I use my browser built-in object inspector to look at the properties on stackpanels and buttons... and use lots of console.log(whatever) to see what values are available, and when.

But, generally speaking, I would NOT make tooltipStack be a child of buttonStack.  Let them BOTH be children of AdvancedDynamicTexture, and use special positioning code (like I am attempting) to keep tooltipStack "loosely attached-to" buttonStack.  It's SORT OF like parenting tooltipStack to buttonStack, but YOU keep control over relative positioning.

Still thinking.  Help from everyone... welcome.  thx.

Notice I "collapse" the width of tooltipStack... to make it disappear  (line 95).  This might not be the best way to make a GUI container appear/disappear... but it works.  Better suggestions welcome, of course.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.