I am new to BabylonJS and haven an issue with the simple animated tooltip. The tooltip works sometimes but after selecting between the meshes or even from the start the tooltip (gui rectangle) is shown without any content (gui.grid with textblocks under control).
How it should work:
At first on hover the tooltip appears with glowing mesh.
When the mesh is left-clicked, the zoom (if camera.radius is too far) and the mesh is set as lockedTarget.
OnPickUp the glowing is disabled, instead highlighting is activated and information (plane with rectangle with grid with textblocks inside) is shown
Only one mesh can be selected (highlighted, info shown)
Might there be a problem with the order of the registered actions?
Edit: I checked the data (array of array of strings), it is still given, while the text in the rectangle is not shown. If I remove linkWithMesh the text is always shown as expected, but its in the screen center and not on the mesh. If I use adaptHeightToChildren on toolBody (rectangle) or toolGrid (grid) the issue is constantly there. So the height of the children is 0?
I removed glow and highlight but the issue is still there: https://playground.babylonjs.com/#B87G3W#4
Now I don’t know what it could be because I checked data, Textblocks and Grid. They are all existent in console.log.
To be precise, the Rectangle (background) of the tooltip is animated, but the attached Grid or its attached Textblocks are not displayed in the Rectangle. This can happen after 3-4 picks between two meshes or the issue is always there when you activate adaptHeightsToChildren = true on Grid.
I am not all too sure of what you exactly want to display in terms of spacing between the title and the content of your tooltip. For now, your grid has the same row height for all.
As for your issue with the rescale, I believe it essentially comes from that you are not using ‘true’ height on your rows. It seems that on rescale, the grid will not adapt. However, if you define a height with true, it does:
In terms of spacing, i would go for 2-3px padding, but if it would just be that to assign paddings to textblocks, i can do that work. It would be great if the height of the Rectangulars, Grids, Textblocks (infobox and tooltip) would be like its content/text (+padding).
Also you removed toolBody[num].linkWithMesh(mesh), but then the tooltip is not positioned like before between right corner and center of the mesh. Here is my current PG (simple as possible): https://playground.babylonjs.com/#B87G3W#8
Percentage works if the grid is static. For some reason, it appears it does not work on dynamic resize of the container. Except when the resize comes from the resize of the advancedDynamicTexture layer. Not sure why, but currently, that’s what it seems to be.
Can i use the first row as complete row, because it seems to be cut, due to the additional column that is added afterwards.
Not just like that. You would need to either override the column of the grid or I’d rather recommend to have your title as a textBlock eventually in a container (rectangle) and start with your grid underneith.
What did not work aswell was making left column and headline bold, i used fontWeight or fontStyle=‘font-weight:bold’ (CSS).
So, it would be
button.fontWeight = “bold”;
(single or double quotes) but I usually prefer setting it like this
fontFamily = “Arial bold”;
Recognized you changed Infobox (Rectangle) to linkWithMesh. Is that necessary?
I guess not, I just reinstated all from ‘linkedWithMesh’ in your PG. I have to admit I didn’t really read the full code.
No, that’s the same issue as above or when you tried using adapt to children. It doesn’t work dynamically with the height of a textBlock with resizeToFit…
I guess the other solution, would be to put everything in a bigger transparent container and add 1 more row to the grid set to a height of 1 and without ‘true’. This will fill-in the remaining space.
Edit: There’s another solution to resize the external container (the green rectangle) to fit your content but it involves to calculate the total width and height (it’s js not bjs) and is a bit complex. Also since the tooltip sort of pops-up while scaling, I am really not sure of what it will do (and I cannot help with this, sry. This is beyond my expertise). I believe Ican point you towards the link if you want to give it a try.
To have the tooltip right-top offsetted of the mesh, I reactivated linkWithMesh on tooltip-rectangle. After that the content of the textblocks or the textblocks idk, cannot be seen in the rectangle anymore. What was strange from the start is that the rectangle is shown but grid + textblocks not.
I am sorry. I am afraid I do not fully understand this part. Would you have a new PG to share to illustrate this? And may be just a simple mock-up of how you want your tooltip to show. I am sure we can solve this somehow without taking the long path.
Beside I suspected the size of the grid or textblocks could change while mesh picking between those two and cause the sometimes occuring issue of not showing any text in rectangle of the animated tooltip (not the infobox, the static infobox is working perfectly).
At the moment the spacing is too wide, strangely resizeToFit is not helping. But this spacing issue can be done later when it is not related to the true problem.
Edit: Just found out that after some more mesh picking, the tooltip can regain its content, before after more mesh pickings it is empty again. I am not sure if that is related, because the problem is sometimes there from the start by the first on hover without any mesh pickings. Could it be that it is animated too slow, because i saw twice how the content (text) was animated a bit slower then the rectangle.
What you explain here might just be a completely different issue. I thought you had a problem with how the grid displays but if elements do not display at all, it’s more likely to be something around the buffer and rendering. Sadly, in your PG, I tried like mad clicking everywhere but so far have not been able to reproduce (but I believe you when you say it does). May be at this point, we’ll try to call in some people that are more aware than me of possible issues with the rendering. Let me just call back @carolhmj and may be cc @RaananW and we’ll see what comes out of it, if that’s ok with you?…