IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tooltip qui suit l'image


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2022
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2022
    Messages : 16
    Points : 8
    Points
    8
    Par défaut Tooltip qui suit l'image
    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;
      }

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 010
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 010
    Points : 13 880
    Points
    13 880
    Par défaut
    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.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2022
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2022
    Messages : 16
    Points : 8
    Points
    8
    Par défaut
    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>

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 010
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 010
    Points : 13 880
    Points
    13 880
    Par défaut
    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.

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2022
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2022
    Messages : 16
    Points : 8
    Points
    8
    Par défaut
    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

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 093
    Points : 40 918
    Points
    40 918
    Par défaut
    Bonjour,
    il ne faut pas déplacer l'image elle même mais son conteneur, la « tooltip » suivra.

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2022
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2022
    Messages : 16
    Points : 8
    Points
    8
    Par défaut
    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>

  8. #8
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 010
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 010
    Points : 13 880
    Points
    13 880
    Par défaut
    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>

  9. #9
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2022
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2022
    Messages : 16
    Points : 8
    Points
    8
    Par défaut
    Merci de ton aide j'ai résolu mon problème.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mon image qui suit la scrollbar
    Par crosby dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 18/07/2009, 13h52
  2. MouseDragged PaintComponent. Image qui suit la souris
    Par BaptisteTienko dans le forum Débuter
    Réponses: 8
    Dernier message: 03/07/2009, 12h39
  3. Réponses: 6
    Dernier message: 07/04/2009, 11h52
  4. image qui suit la barre de defilement
    Par sc62290 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 29/01/2009, 08h39
  5. texte qui suit le contour d'une image
    Par Rocket666 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 12
    Dernier message: 07/02/2006, 11h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo