Tooltip qui suit l'image

Version imprimable

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:

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:

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:

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:

1
2
3
4
5
#ball {
    cursor: pointer;
    width: 15px;
    height: 15px;
  }

14/06/2022, 23h10
mathieu

regardez le code html avec la console de développement de votre navigateur, vous verrez que la balise "img" est dans "div class=tooltip" au chargement de la page. et lors de l'évènement "onmousedown", cette balise "img" est déplacée à un endroit que vous n'aviez peut être pas voulu.
15/06/2022, 13h51
GaletUltime

finalement g essayer cette solutions et cela ne marche pas etant donné que la syntaxe que j'utilise pour crée le tooltip doit forcément être :

Code:

<div class="tooltip"> item qui aura le tooltip<span class="tooltiptext">texte du tooltip</span></div>
15/06/2022, 14h14
mathieu

vous avez essayé quoi ? montrez nous le code que vous avez maintenant.
je pense qu'il faut juste modifier le code qui déplace la balise, le reste à l'air bon.

le code de la balise est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="tooltip"><img class="size_of_img" id="ball" src="http://localhost/Projet%20Stage/ImagePCPNG.jpg" alt="Image 1" />
<span class="tooltiptext">
 
 
    <script type="text/javascript">
      function getValue() {
      // Sélectionner l'élément input et récupérer sa valeur
      var input1 = document.getElementById("donné1").getvalue;
      var input2 = document.getElementById("donné2").getvalue;
      var input3 = document.getElementById("donné3").getvalue;
      var input4 = document.getElementById("donné4").getvalue;
      // Afficher la valeur
      document.getElementById("ball").value=input1 ;
      document.getElementById("ball").value=input2 ;
      document.getElementById("ball").value=input3 ;
      document.getElementById("ball").value=input4 ;
      }
    </script>
  </span>
</div>

et aprés votre message j'ai essayer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img class="size_of_img"  id="ball" class="tooltip" src="http://localhost/Projet%20Stage/ImagePCPNG.jpg" alt="Image 1" />
<span class="tooltiptext">
 
 
    <script type="text/javascript">
      function getValue() {
      // Sélectionner l'élément input et récupérer sa valeur
      var input1 = document.getElementById("donné1").getvalue;
      var input2 = document.getElementById("donné2").getvalue;
      var input3 = document.getElementById("donné3").getvalue;
      var input4 = document.getElementById("donné4").getvalue;
      // Afficher la valeur
      document.getElementById("ball").value=input1 ;
      document.getElementById("ball").value=input2 ;
      document.getElementById("ball").value=input3 ;
      document.getElementById("ball").value=input4 ;
      }
    </script>
  </span>

ce qui n'a pas fonctionné
ne faites pas gaffe au script JS c'est pour remplir le tooltip avec des imput

15/06/2022, 17h37
NoSmoking

Bonjour,
il ne faut pas déplacer l'image elle même mais son conteneur, la « tooltip » suivra.

merci beaucoup pour votre aide à tous les deux ça y est ça marche je mets mon code pour les intéressés
Code:

1 2 3 4 5 <div class="tooltip" id = "ball"> <img class="size_of_img" id="ball" src="http://localhost/Projet%20Stage/ImagePCPNG.jpg" alt="Image 1" /> <span class="tooltiptext">test</span> </div>

essayez comme cela :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
</head>
<body>
 
 
<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}
 
 
#ball {
    cursor: pointer;
  }
  
</style>
 
 
<script>
"use strict";
 
document.addEventListener("DOMContentLoaded", function () {
        
        
        console.clear();
        
        let conteneur = document.getElementById("conteneur");
        
        
        conteneur.onmousedown = function (event) {
        
            let shiftX = event.clientX - ball.getBoundingClientRect().left;
            let shiftY = event.clientY - ball.getBoundingClientRect().top;
         
            conteneur.style.position = 'absolute';
            conteneur.style.zIndex = 1000;
            
            moveAt(event.pageX, event.pageY);
         
            // Déplace la balle aux cordonnées (pageX, pageY)
            // Prenant en compte les changements initiaux
            function moveAt(pageX, pageY) {
            
                    conteneur.style.left = pageX - shiftX + 'px';
                    conteneur.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
            conteneur.onmouseup = function() {
              document.removeEventListener('mousemove', onMouseMove);
              conteneur.onmouseup = null;
            };
         
        };
 
    conteneur.ondragstart = function() {
        return false;
    };
        
        
        
        
});
 
</script>
 
 
 
 
<div class="tooltip" id="conteneur">
	<img
		class="size_of_img"
		id="ball"
		src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/UIR.svg/220px-UIR.svg.png"
		alt="Image 1"
	/>
	<span class="tooltiptext">test</span>
</div>
 
 
</body>
 
</html>

16/06/2022, 11h48
GaletUltime

Merci de ton aide j'ai résolu mon problème.