Tr.js - the intersection of the rays and the position of the sphere

I have a scene with pipe geometry, and the intersection of the rays works fine. At the intersection of the rays, I show a small sphere of red and a tooltip next to the cursor. please, find

Now, if I add a title with a div element, the intersection of the ray works, but the problem is that there is a distance between the red sphere, the tooltip and the mouse cursor. Find

Below you will find the header code, div hints, spheres and collision detection features:

Title:

    <div style="margin-top:10px;margin-left:3%;height:100px;width:70%">
      <label style="color:#b0bb02;font-size:14pt">three.js</label>
      <label style="color:#f5f7f9;font-size:14pt;font-weight:bold">Tube Geometry</label><br><br>               
    </div>

Instrumental div:

textDiv = document.createElement( 'div' );          
            textDiv.style.position = 'absolute';
            textDiv.style.top = '50px';
            textDiv.style.margin = '8px';
            textDiv.style.border = '1px solid blue';
            textDiv.style.zIndex = '100';
            textDiv.style.background = '#ffffff';
            textDiv.style.display = 'block';
            container.appendChild( textDiv );

Sphere geometry:

dot = new THREE.Mesh ( new THREE.SphereGeometry( 1, 12, 1 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );

Collision Detection:

var intersects;

        function detectCollision(event){

            var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

            /*var mouse_x =   ((event.pageX-event.target.offsetParent.offsetLeft) / renderer.domElement.width) * 2 - 1;
            var mouse_y = - ((event.pageY-event.target.offsetParent.offsetTop) / renderer.domElement.height) * 2 + 1;
            var vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);*/

                projector.unprojectVector( vector, camera );
                var ray = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );

                intersects = ray.intersectObjects( objects );                                   

                var pnt=0; var clickedMD = 0; var clickedDegree; var clickedTVD;

                if ( intersects.length > 0 ) {                  

                    dot.position.copy( intersects[0].point );
                    scene.add( dot );

                    var fi = intersects[0].faceIndex;
                    pnt = Math.round(fi/11);                    

                    clickedMD = pathObjColl[pnt].md;
                    clickedTVD = Math.round(pathObjColl[pnt].point.z);
                    clickedDegree = degrees[Math.round(fi%11)]; 

                    // tooltip
                    var elem = document.getElementsByTagName("canvas");
                    var canvas = elem[0];
                    var x = event.pageX - canvas.offsetLeft ;
                    var y = event.pageY - canvas.offsetTop  ;
                    //console.log("X: "+x+" Y: "+y);
                    textDiv.style.top = y+"px";
                    textDiv.style.left = x+"px";                
                    textDiv.innerHTML = "&nbsp;Degree: "+clickedDegree+"<br/>&nbsp;MD: "+clickedMD+" ft<br/>&nbsp;TVD: "+clickedTVD+" ft";
                    if(textDiv.style.display == 'none'){
                        textDiv.style.display = 'block';    
                    }
                }

                else if(intersects.length == 0){
                    var textDivVis = textDiv.style.display;
                    console.log(textDivVis);
                    if(textDivVis == 'block'){
                        textDiv.style.display = 'none'; 
                    }

                }

        }

demo on jsfiddle

Why is there a distance between the mouse cursor, the spherical geometry and the end too large if I add a title?

R54