트리거 된 이벤트의 요소를 툴팁으로 따라 가려면 어떻게해야합니까?

Question

내 코드에 몇 가지 문제점이 있습니다. 기본적으로 좌표계에는 빨간 공과 div 상자가 있습니다.

문서를 클릭하면 div.ball이 원하는 위치로 이동하지만 상자는 해당 위치에 있습니다. 두 번째 클릭 후, 공은해야만하는 위치로 이동하고 상자는 공의 이전 위치로 이동합니다. 상자는 동일한 위치를 두 번 클릭해야하는 위치로 이동합니다.

상자가 공 옆에 나타날 때마다 툴팁처럼 나타나길 원합니다.

나를 도와 줄 수 있습니까?

function menuRoll(){ 
 
    var hidden_collapse = document.getElementById("hidden_collapse"); 
 
    hidden_collapse.classList.toggle("myStyle"); 
 
} 
 

 

 
function readPosition(ball){ 
 
    var rect = ball.getBoundingClientRect(); 
 
    var x = Math.round(rect.left) + "px"; 
 
    var y = Math.round(rect.top) + "px"; 
 
    coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y; 
 
    coordinat.style.top = Math.round(rect.top) - 30 + "px"; 
 
    coordinat.style.left = Math.round(rect.left) + 37 + "px"; 
 
} 
 

 

 
window.onload = function(){ 
 
    var ball = document.getElementById('foo'); 
 
    var ball_space = document.getElementById('ball_space'); 
 
    var coordinat = document.getElementById("coordinat"); 
 
    document.addEventListener('click', function(e){ 
 

 
     ball.style.background = "#B40520"; 
 
     var ball_H = ball.offsetHeight; 
 
     var ball_W = ball.offsetWidth; 
 
     readPosition(ball); 
 
     ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)'; 
 
     ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)'; 
 

 
    }, true); 
 

 
};

#coordinat { 
 
    transition: all 1s; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    text-align: center; 
 
    right: 5px; 
 
    top: 5px; 
 
    width: 150px; 
 
    height: 30px; 
 
    padding: 5px 5px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 0.8em; 
 
} 
 

 
#foo{ 
 
    margin: 2px; 
 
    border-radius: 50px; 
 
    width: 30px; 
 
    height: 30px; 
 
    /*background: #B40520;*/ 
 
    background: white; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    -moz-transition: transform 1s, background 1s; 
 
    -webkit-transition: transform 1s, background 1s; 
 
    -ms-transition: transform 1s, background 1s; 
 
    -o-transition: transform 1s, background 1s; 
 
    transition: transform 1s, background 1s; 
 

 
}

<div id="coordinat">Coordinates you will see!</div> 
 
<div id="ball_space"> 
 
    <div id="foo"></div> 
 
</div>

Answer 1

당신은, 대신 툴팁의 위치를 ​​볼 위치를 사용하여 툴팁의 이전 위치를 읽고는

function menuRoll(){ 
 
     var hidden_collapse = document.getElementById("hidden_collapse"); 
 
     hidden_collapse.classList.toggle("myStyle"); 
 
     } 
 
//readPosition(); 
 

 
     function readPosition(ball){ 
 
     //console.log(ball.clientY,ball.clientX); 
 
     var clientX = parseInt(ball.clientX); 
 
     var clientY = parseInt(ball.clientY); 
 
     if((clientX+150) > window.innerWidth){ 
 
      clientX -= 210; 
 
     } 
 
     coordinat.style.top = (clientY-37) + "px"; 
 
     coordinat.style.left = (clientX+30) + "px"; 
 
     document.getElementById('coordinat').innerHTML = "Coordinates:"+ "<br>"+ clientX+" X "+clientY; 
 
     } 
 

 

 
window.onload = function(){ 
 
    var ball = document.getElementById('foo'); 
 
    var ball_space = document.getElementById('ball_space'); 
 
    var coordinat = document.getElementById("coordinat"); 
 
    document.addEventListener('click', function(e){ 
 
    ball.style.background = "#B40520"; 
 
    var ball_H = ball.offsetHeight; 
 
    var ball_W = ball.offsetWidth; 
 
    ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)'; 
 
    ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)'; 
 
    readPosition(e); 
 
    }, true); 
 

 
};

#coordinat { 
 
    transition:all 1s; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    text-align: center; 
 
    right: 5px; 
 
    top: 5px; 
 
    width: 150px; 
 
    height: 30px; 
 
    padding: 5px 5px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 0.8em; 
 
} 
 

 
#foo{ 
 
margin: 2px; 
 
border-radius:50px; 
 
width:30px; 
 
height:30px; 
 
/*background:#B40520;*/ 
 
background: white; 
 
position:absolute; 
 
top:0px; 
 
left:0px; 
 
-moz-transition: transform 1s, background 1s; 
 
-webkit-transition: transform 1s, background 1s; 
 
-ms-transition: transform 1s, background 1s; 
 
-o-transition: transform 1s, background 1s; 
 
transition: transform 1s, background 1s; 
 

 
}

<div id="ball_space"> 
 
     <div id="coordinat">Coordinates you will see!</div> 
 
    <div id="foo"></div> 
 
    </div>

또한 당신의 코드에서 업데이트 한 극한의 오른쪽을 클릭하면 툴팁을 왼쪽으로 이동하는 코드가 추가되었습니다. 난 자동으로이 기능은 애니메이션 후 위치를 모르기 때문에, 당신은 당신의 redPosition() 함수에 볼의 새로운 위치를 통과해야

if((clientX+150) > window.innerWidth){ 
    clientX -= 210; 
} 

Answer 2

를 왼쪽으로 이동. JSFiddle에서 찾을 수 있듯이 새로운 볼 위치를 전달하여 올바르게 계산할 수 있습니다.

JS는 문제를 해결하기 위해 : 나는 완전히 문제를 이해하지 못하는

function menuRoll(){ 
     var hidden_collapse = document.getElementById("hidden_collapse"); 
     hidden_collapse.classList.toggle("myStyle"); 
     } 


     function readPosition(ball, yPos, xPos){ 
     var rect = ball.getBoundingClientRect(); 
     var x = Math.round(xPos) + "px"; 
     var y = Math.round(yPos) + "px"; 
     coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y; 
     coordinat.style.top = Math.round(yPos) - 30 + "px"; 
     coordinat.style.left = Math.round(xPos) + 37 + "px"; 
     } 


window.onload = function(){ 
    var ball = document.getElementById('foo'); 
    var ball_space = document.getElementById('ball_space'); 
    var coordinat = document.getElementById("coordinat"); 
    document.addEventListener('click', function(e){ 

    ball.style.background = "#B40520"; 
    var ball_H = ball.offsetHeight; 
    var ball_W = ball.offsetWidth; 

    var ball_new_h = e.clientY-(0.5*ball_H); 
    var ball_new_w = e.clientX-(0.5*ball_W); 
    readPosition(ball, ball_new_h, ball_new_w); 
    ball.style.transform = 'translateY('+ ball_new_h +'px)'; 
    ball.style.transform += 'translateX('+ball_new_w+'px)'; 

    }, true); 

};