onclick / hotspot: to show text and/or image popup

[tudaBirds]

Is there any way to have a click on a hotspot pop up a text or, better yet, text and window info card (which disappears on the next click?)

Racking my brain and google to figure this out: any html code examples would be a great help!

(the samples on the modelviewer docs don't show this // and they seem to not work either) .. and I don't want the info boxes showing until the click happens .. but all i can get from modelviewer is the on-screen label for the hotspot (which i also don't want)

thanks!

[elalish]

Can you describe in what way our examples don't work? A screen recording would be helpful.

The hotspot elements can have arbitrary children, so put some <div>s in to create your info card and set them to display: none. Then in your onclick method set this one to display: block and all the others back to display: none. There are lots of other ways too, but this is pretty simple.

[tudaBirds]

Hey, thanks for the answer!

Just about to jump on a call but the example issue is that the foot hotspot doesn't seem to do anything and the hand hotspot doesn't disappear. Will do a vid later if you need it.

As for the html side, I am totally crap at it / just learning: otherwise all of your examples have been nothing but fantastic in helping: I just need to figure out how to do what you suggested :)

[elalish]

No prob, and good luck! The hotspots only change when you orbit behind their normal, so make sure you've tried that.

[tudaBirds]

Ok, I see that now re the change with the hand hotspot, for instance... get it now. I am looking to make them appear on click . disappear on the next click (and still can't see what the helmet one does :)

Anywhere I might find code examples for the infocards, feel free to point me :) thanks again for the reply / model-viewer as is for unbranded display (and other capabilities) is a great tool.

[elalish]

Not exactly what you're looking for, but might be a good place to start for JS actions: https://modelviewer.dev/examples/annotations/index.html#dimensions

[vaggarath]

Dunno if this could help but you should use onclick or eventListener functions. https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onclick / https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener.
If this can help you i used onclick function and use the library SweetAlert2 (the lazy option as i'm a lazy one^^) to manage the modal easily.

// I map an array from an api with which i show /hide and create each button on the spot to which i add an onclick function as below.
spot.onclick = (e)=>{
    //e.preventDefault();
    const isFound = bones.some(element => {
        if (element.nom.toLowerCase().replace(/\s/g, '') === nomOs.toLowerCase().replace(/\s/g, '')) {
            if(element.description && element.description !== ""){
                // return nomOs + "\n\r" + element.description;
                Swal.fire({
                    title:nomOs,
                    text:element.description
                })
            }else{
                Swal.fire(nomOs)
            }
        }
      });
}

You just need to remove the comparison part which is something i do since the buttons are generated from an api
below how it shows on the viewer