Incorrect position of custom tooltip

Questions
,
1

Hi,
i have implemented the tooltip code in my project i can even see the tooltip when hovered on the object.but the issue is the tooltip box is appearing at the extreme right corner of the screen.

image
image1366×768 271 KB

can someone suggest me how to get the box at the side of the selected object rather than the top right

below is the implemented code

function showTooltip() {
   
   // var divElement = ".tooltip";

    if (divElement && latestMouseProjection) {
        divElement.css({
            display: "block",
            opacity: 0.0
        });

        var canvasHalfWidth = renderer.domElement.offsetWidth / 2;
        var canvasHalfHeight = renderer.domElement.offsetHeight / 2;

        var tooltipPosition = latestMouseProjection.clone().project(camera);
        tooltipPosition.x = (tooltipPosition.x * canvasHalfWidth) + canvasHalfWidth + renderer.domElement.offsetLeft;
      tooltipPosition.y = -(tooltipPosition.y * canvasHalfHeight) + canvasHalfHeight + renderer.domElement.offsetTop;
          
       var tootipWidth = divElement[0].offsetWidth;
       var tootipHeight = divElement[0].offsetHeight;

       
     divElement.css({
            left: '${tooltipPosition.x - tootipWidth/2}px',
            top: '${tooltipPosition.y - tootipHeight - 5}px'
        });

        
  

        setTimeout(function() {
            divElement.css({
                opacity: 1.0
            });
        }, 25);
    }
}

// This will immediately hide tooltip.
function hideTooltip() {
    var divElement = $("#tooltip");
    if (divElement) {
        divElement.css({
            display: "none"
        });
    }
}

// Following two functions will convert mouse coordinates
// from screen to three.js system (where [0,0] is in the middle of the screen)

//var datavalue = JSON.parse('json/zc_co_ordinate.json');
//console.log('datavalue' + datavalue);
function updateMouseCoords(event, coordsObj) {

    coordsObj.x = ((event.clientX - renderer.domElement.offsetLeft + 0.5) / window.innerWidth) * 2 - 1;
    coordsObj.y = -((event.clientY - renderer.domElement.offsetTop + 0.5) / window.innerHeight) * 2 + 1;
}

function handleManipulationUpdate() {
    raycaster.setFromCamera(mouse, camera); {
    //	console.log('new' + tooltipEnabledObjects[0]);
        var intersects = raycaster.intersectObjects(tooltipEnabledObjects);
        if (intersects.length > 0) {
            latestMouseProjection = intersects[0].point;
        
            hoveredObj = intersects[0].object;
         
            var adjustedheight = (2*intersects[0].object.position.y) - 0.2 ;
            var adjustedwidth = intersects[0].object.position.z - ((intersects[0].object.geometry.parameters.depth) /2 ) ;
            var adjustedlength = intersects[0].object.position.x - ((intersects[0].object.geometry.parameters.width) / 2 ) ;       
             
            var adjustedheight = adjustedheight / Scalingvalue ;
            var adjustedwidth = adjustedwidth / Scalingvalue;
            var adjustedlength = adjustedlength / Scalingvalue ;  
            
            divElement.text(hoveredObj.userData.tooltipText);
            hoveredObj.userData.tooltipText = 'co-ordinates:(' + 'name' + intersects[0].object.name +','+  adjustedwidth +',' + adjustedheight +','+ adjustedlength+ ')';

          
        }
    }




    if (tooltipDisplayTimeout || !latestMouseProjection) {
        clearTimeout(tooltipDisplayTimeout);
        tooltipDisplayTimeout = undefined;
        hideTooltip();
    }

    if (!tooltipDisplayTimeout && latestMouseProjection) {
    //	console.log('hi');
        tooltipDisplayTimeout = setTimeout(function() {
            tooltipDisplayTimeout = undefined;
            showTooltip();
        }, 330);
    }
}

function onMouseMove(event) {
	
    updateMouseCoords(event, mouse);
    latestMouseProjection = undefined;
    hoveredObj = undefined;
    handleManipulationUpdate();
}

window.addEventListener('mousemove', onMouseMove, false);
2

If you are not using CSS2DRenderer of label/tooltop rendering, I still suggest you use the same approach like this renderer. The relevant code looks like so:

var vector = new THREE.Vector3( latestMouseProjection.x, latestMouseProjection.y, 0 );
vector.project( camera );

var style = 'translate(-50%,-50%) translate(' + ( vector.x * canvasHalfHeight + canvasHalfHeight + renderer.domElement.offsetLeft ) + 'px,' + ( - vector.y * canvasHalfHeight + canvasHalfHeight + renderer.domElement.offsetTop ) + 'px)';
text.style.transform = style;

Related:

3

Hi Michael,

I modified the code to:

 divElement.css({
            left: tooltipPosition.x ,
            top: tooltipPosition.y
        });

and now it works!

Thanks

4

It would be nice if the topic could be renamed to something more generic. I’m not sure what’s this using, the dom directly or something else, but “custom tooltip” is very specific to the context of your project.

Something perhaps like:

How to position a DOM element to align with a 3d coordinate in a window/frame

I also think the tooltip shows on the left, not the right, it took me a second to figure out it’s the green box.