Control order of the annotations to prevent

[llllkatjallll]

Hi!
I was wondering if it is possible to change the order in which the annotations are being shown on my html canvas?
If I understand it right, currently the annotation with a smaller distance to the camera is always placed on top.
In some situations it makes sense, but sometimes this leads to things like this:

You can see this example here: https://prefrontalcortex.de/labs/model-viewer/hotspot-order/

I thought that by re-ordering the annotations in html or by changing the z-index on click/hover with JS would overwrite previous order but none of this has worked.

Are there any other possibilities to control the annotation order?

[elalish]

Huh, yeah that's not great. we don't really control ordering internally since we have no idea what content you might have put in. I'm surprised that the z-index didn't fix it; maybe just set the z-index of the annotations to be in front of the buttons?

[llllkatjallll]

It didn't work eather.
I did more tests and it seems like hotspots that are attached to model-viewer model are ignoring the z-index of another attached hotsopots (but they respect z-index of elements that are not attached to the model.

Here is an example:
Yellow and blue hotspots are not attached and have z-index 1(blue) and 4(yellow). Attached hotspots have z-index 2(red) and 3(green). (All hotspots are children of the model-viewer element)

Red and green hotspots are placed over the blue hotspot and under the yellow one, what is right, but green one should be over the red one, what is wrong :(

You can try it here: https://prefrontalcortex.de/labs/model-viewer/hotspot-order/
There are some other tests and variations too.

[llllkatjallll]

Edit: it does not always respect z-index of hotspots that are not attached do the model:
Here the green hotspot should be always on top because of z-index 4. But if I rotate the model, it is sometimes under the blue hotspot(z-index 2) and sometimes over it.

You can reproduce it if you select the last button in the example I posted in my last comment and rotate the model:

[elalish]

Thanks for the detail; I must admit I do not understand why it's behaving the way it is, but I'm also a little shaky on how z-index is supposed to work anyway. Would you be interested in testing some of the internals here? https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/Hotspot.ts

We wrap each hotspot in a couple of <div>s, so maybe that's somehow confusing things. PRs certainly welcome.