Tooltip qui suit l'image

**GaletUltime** · 14/06/2022, 10h22

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

**mathieu** · 14/06/2022, 23h10

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.

**GaletUltime** · 15/06/2022, 13h51

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="tooltip"> item qui aura le tooltip<span class="tooltiptext">texte du tooltip</span></div>

**mathieu** · 15/06/2022, 14h14

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.

**GaletUltime** · 15/06/2022, 15h36

le code de la balise est le suivant :

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

**NoSmoking** · 15/06/2022, 17h37

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

**GaletUltime** · 16/06/2022, 08h43

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mathieu** · 16/06/2022, 09h37

essayez comme cela :

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

**GaletUltime** · 16/06/2022, 11h48

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

Tooltip qui suit l'image

JavaScript

Discussions similaires

Partager

Partager