Threebox adding tooltips to building layer

I am trying to get a marker/label/tooltip placed on top of a 3d building but cannot seem to find a solution. I’ve started looking at Threebox and seem to have been able to place a tooltip on the building following the example given in Threebox docs. The issue here is this section of the example code places the popup at the bottom of the building, whereas the tooltip is at the top.

function onSelectedFeatureChange(e) {
            let feature = e.detail;
            if (feature && feature.state && feature.state.select) {

                if (popup) popup.remove();

                let center = [];
                let coords = tb.getFeatureCenter(feature, null, 0);

                center.push([coords[0], coords[1]]);

                //TODO: this creates a Mapbox popup in the same coords the Threebox popup to see the difference
                popup = new mapboxgl.Popup({ offset: 0 })
                    .setLngLat(center[0].slice())
                    .setHTML('<strong>' + (feature.id || feature.type) + '</strong >')
                    .addTo(map);

                let geoJson = {
                    "geometry": feature.geometry,
                    "type": "Feature",
                    "properties": feature.properties
                }
                console.log(JSON.stringify(geoJson, null, 2))

            }


        }

enter image description here

  • How can I place the popup in the same position as the tooltip?

  • If I am not able to place the popup in the location of the tooltip, how can I change the value inside of the tooltip?

  • If I cannot change the value inside of the tooltip, how do I add a new tooltip to the selected building? The feature that is returned in the onSelectedFeatureChange function has a addTooltip method, but it requires an obj in order to place the tooltip.