Tooltip losing content

Hello everyone,

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

Additionals:

  • Only one mesh can be selected (highlighted, info shown)

Might there be a problem with the order of the registered actions?

Here is my PG: https://playground.babylonjs.com/#B87G3W#1

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?

Hello and welcome to the Babylon community!

Since the GUI can be affected by post-processes, and we have glow and highlight here, I feel they might be the culprits. If you remove them, does that problem still happen? If that solves the problem and you want to add the glow and highlight, you’ll just need to have a separate camera for the GUI: How to make gui disable in DefaultRenderingPipeline? - Questions - Babylon.js (babylonjs.com) How to disable post effect on GUI that linkWithMesn - Questions - Babylon.js (babylonjs.com)

Thanks, for the reply.

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 also added an extra camera, DefaultPipeline, AdvText, like you recommend, unfortunately no success. It got even worse. See https://playground.babylonjs.com/#B87G3W#5

Hi,
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

I removed linkedWithMesh only for the debug (forgot to reinstate it, sry). It does not affect the result (not with your rows defined as ‘true’.

Edit: And if you want your title to occupy a bigger height (which is likely) I wouldn’t use padding but create the first row of the grid bigger and then add the other rows.

I’m afraid this will not work with a grid. You can just pile up your textBlocks with resizeToFit but the grid will never fit your textBlock. Not just now.

Ah I see, thanks for the efforts.

  1. So you need pixel assign, it does not work with percentage?

  2. Can i use the first row as complete row, because it seems to be cut, due to the additional column that is added afterwards.

  3. What did not work aswell was making left column and headline bold, i used fontWeight or fontStyle=‘font-weight:bold’ (CSS).

  4. Recognized you changed Infobox (Rectangle) to linkWithMesh. Is that necessary?

  5. I have to know how the height of Grid has to be, so it fits its vertical Textblock heights? Is there another solution? I need a headline and a table with 2xN (N is number of array elements).

Edit: Maybe height (row pixels of grid) can be determined/calculated bytextblock fontsize?

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.

  1. 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.

  1. 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”;

  1. 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.

Edit2: Got it. But be prepared to a long journey :wink:

Ok. Thanks anway.

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.

This is my current PG: https://playground.babylonjs.com/#B87G3W#9
It it taken from, which had no grid: https://www.babylonjs-playground.com/#XCPP9Y#1403
The tooltip is shown as wanted, but sometimes when i switch between the two meshes suddenly the tooltip of the second mesh shows an “empty” transparent green rectangle. This is the true issue why i opened the thread.

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?…

Sure, I am happy for any help and not in a hurry :slight_smile:

Investigating right now :slight_smile:

1 Like

Hey thank you a lot for the work. I tried some ideas yesterday (i.e. setting camera for highlight and glow or fixed heights & widths), but was not successful at all.

I haven’t figured out the root cause yet, but turning off clipChildren on the tooltip rectangle seems to be a workaround: Mesh Selection System | Babylon.js Playground (babylonjs.com)

1 Like

After talking to @RaananW we opened an issue, he’s going to fix it very soon: Grid children disappear once linked mesh is outside view · Issue #12602 · BabylonJS/Babylon.js (github.com)
Thanks for bringing this to our attention! :smiley:

2 Likes

PR is open - Grid children disappear once linked mesh is outside view by RaananW · Pull Request #12607 · BabylonJS/Babylon.js (github.com)

4 Likes