Bonjour

Je suis nouveaux sur le forum alors j’espère ne pas me tromper d'endroit pour ce post.

Mon problème est le suivant j'ai crée un tooltip sur une image grâce a du HTML et du JavaScript cependant j'aimerai que quand je déplace cette image ( car oui il y a en plus un script JavaScript pour que je puisse bouger l'image comme je veux grâce a ma souris ) mon tooltip suivent suivent cette image car pour le moment quant je passe ma souris sur l'image le tooltip s'affiche parfaitement cependant quand je déplace l’image et que je la repose le tooltip ne réapparait pas.

J’espère avoir votre aide.

code pour le mouvement de l'image
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
ball.onmousedown = function(event) {
 
    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;
 
    ball.style.position = 'absolute';
    ball.style.zIndex = 1000;
    document.body.append(ball);
 
    moveAt(event.pageX, event.pageY);
 
    // Déplace la balle aux cordonnées (pageX, pageY)
    // Prenant en compte les changements initiaux
    function moveAt(pageX, pageY) {
      ball.style.left = pageX - shiftX + 'px';
      ball.style.top = pageY - shiftY + 'px';
    }
 
    function onMouseMove(event) {
      moveAt(event.pageX, event.pageY);
    }
 
    // déplace la balle à l’évènement mousemove
    document.addEventListener('mousemove', onMouseMove);
 
    // dépose la balle, enlève les gestionnaires d’évènements dont on a pas besoin
    ball.onmouseup = function() {
      document.removeEventListener('mousemove', onMouseMove);
      ball.onmouseup = null;
    };
 
    };
 
    ball.ondragstart = function() {
    return false;
    };

créations de l'image et du tooltip:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<div class="tooltip"><img class="size_of_img" id="ball" src="http://localhost/Projet%20Stage/ImagePCPNG.jpg" alt="Image 1" />
<span class="tooltiptext">test</span>

HTML de l'image et du tooltip:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

CSS de l'image :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
#ball {
    cursor: pointer;
    width: 15px;
    height: 15px;
  }