3D模型中的Threebox工具提示

我一直在尝试在某些导入的3D模型上启用工具提示，但是它不起作用。

我已经在threbox中启用了工具提示，并且在3d元素的选项中启用了工具提示，如下所示。

tb = new Threebox(
    map,
        mbxContext,
    {
        realSunlight: true,
        enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
        enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models 
    }
);

var proptions = {
    obj: './models/er.glb',
    type: 'gltf',
    scale: 10,
    units: 'meters',
    rotation: { x: 90, y: 0, z: 0 }, //default rotation
    anchor: 'center',
    adjustment: { x: 0, y: 0, z: 0.4 },
    enableToltips: true
}

当我加载对象时，我执行以下操作：

tb.loadObj(proptions, function (model) {
    model.setCoords(place);
    model.addTooltip("A radar in the middle of nowhere", true);
    model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
    tb.add(model);
});

尽管对象出现在渲染中，但当我将鼠标放在上方或单击时，没有任何内容显示工具提示。

我想念什么？

编辑：

在@jscastro响应之后，我将html页面顶部的导入更改为<link href="./threebox-plugin/examples/css/threebox.css" rel="stylesheet" />（该路径是文件所在位置的正确路径）

我还删除了proptions中的enableTooltip：true。

尽管它仍然不起作用，但下面的代码将保持原样：

var origin = [-8.4, 41.20, 1];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: origin,
    zoom: 11,
    pitch: 30,
    antialias: true
});

//Things related to dateTime ommited

window.tb = new Threebox(
    map,
    map.getCanvas().getContext('webgl'),
    {
        realSunlight: true,
        enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
        enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models 
    }
);

map.on('style.load', async function () {
    await importarLinhas();
    // stats
    // stats = new Stats();
    // map.getContainer().appendChild(stats.dom);
    animate();

            
    map.addLayer({
        id: 'custom_layer',
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, mbxContext) {

            var eroptions = {
                obj: './models/stationBus.fbx',
                type: 'fbx',
                scale: 0.01,
                units: 'meters',
                rotation: { x: 90, y: 20, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: -0.1, y: -0.1, z: 0.4 }
            }

            var poptions = {
                obj: './models/Busstop.fbx',
                type: 'fbx',
                scale: 0.03,
                units: 'meters',
                rotation: { x: 90, y: 20, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: -0.1, y: -0.1, z: 0.1 }
            }

            var proptions = {
                obj: './models/er.glb',
                type: 'gltf',
                scale: 2.7,
                units: 'meters',
                rotation: { x: 90, y: 0, z: 0 }, //default rotation
                anchor: 'center',
                adjustment: { x: 0, y: 0, z: 0.4 }
            }

                allNos.forEach((element) => { //For each one of a list that i fill first
                    //center of where the objects are
                    var place = [element.lng, element.lat, 0];

                    //cylinder as "base" for each one of the 3d Models 
                    **//in here i cant do the Tooltip for the object**
                    const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.15, 32);
                    const material = new THREE.MeshLambertMaterial({ color: 0x5B5B5B });
                    const cylinder = new THREE.Mesh(geometry, material);

                    var baseOptions = {
                        obj: cylinder,
                        anchor: 'center',
                        adjustment: { x: 0, y: 0, z: -0.4 }
                    }

                    let base = tb.Object3D(baseOptions);
                    base.setCoords(place);
                    base.setRotation({ x: 90, y: 0, z: 0 })
                    //The text is just for the test
                    base.addTooltip("A radar in the middle of nowhere", true);
                    // base.castShadow = true;
                    window.tb.add(base);
                    
                    //next i check what type of element it is 
                    //it can only be one at the same time, so i use different models for each type
                    if (element.tipo === "p") {
                        window.tb.loadObj(poptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }
                    if (element.tipo === "er") {
                        window.tb.loadObj(eroptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }
                    if (element.tipo === "pr") {
                        window.tb.loadObj(proptions, function (model) {
                            model.setCoords(place);
                            model.addTooltip("A radar in the middle of nowhere", true);
                            model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
                            // model.castShadow = true;
                            window.tb.add(model);
                        });
                    }

                });

        },

        render: function (gl, matrix) {
            window.tb.setSunlight(date, origin.center);
            window.tb.update();
        }

    })
    map.addLayer(createCompositeLayer());

    map.on('SelectedFeatureChange', onSelectedFeatureChange);
});