How to have a tooltip follow an element on a triggered event?

user_8941289 0
Viewed 112

I have some problems with my code. Basically, I have a red ball and a div box for coordinates.

When I click on a document div.ball goes where I want to, but the box stays at its position. After 2nd click, ball goes where it should and the box moves to the previous position of the ball. The box goes where it should after double click on the same position.

I want the box be like a tooltip, appearing every time next to the ball.

Can you guys help me?

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>

css html javascript
2 Answers

You are reading previous position of tooltip, Instead Use ball position for tool-tip position, Have updated in your snippet 

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>

Also added code to move tooltip at left if you click at extreme right, tooltip will automatically shift to left 

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

You should pass new position of ball to your redPosition() function, because this function doesn't know a position after animation. As you can find in JSFiddle I pass a new ball position to function, so now it can be calculated properly.

JS to solve your problems:

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);

};
user_29720870
Related