Remplissage tooltip avec plusieurs INPUT

Version imprimable

Bonjour,

voici mon problème :
je chercher a remplir un tooltip avec des imput que l'utilisateur doit remplir puis validé a l'aide d'un bouton voici mon code
code pour crée le 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
28
29
30
31
32
33
34
35
36
37
 <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: 15px;
  padding: 15px 0;
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>
 
<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">
  Nom du PC:<br/>
  Numeros de Serie :<br/>
  Utilisateur :<br/>
  Emplacement: <br/>
 
</span>

code qui ne marche pas pour remmplir le tooltip:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
        <script type="text/javascript" >
                 function create_Image(i) {
                  let imput1 = 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
                  document.getElementById("ball").value=input1 ;
                  document.getElementById("ball").value=input2 ;
                  document.getElementById("ball").value=input3 ;
                  document.getElementById("ball").value=input4 ;
 
                  }
            </script>

code pour crée le bouton:

Code:

<input type="button" onclick="create_Image(1)" id= "test_" value="Validé" />

Merci d'avance pour votre aide.

16/06/2022, 17h03
NoSmoking
Bonjour,

Citation:

code qui ne marche pas pour remmplir le tooltip:

une ID doit être UNIQUE ce qui n'est déjà pas le cas dans ton code HTML
Code:

1 2 <div class="tooltip" id = "ball"> <img class="size_of_img" id="ball" ...>
Où as-tu trouvé getvalue :

Code:

document.getElementById("donné1").getvalue;

Tu affectes quatre valeurs différentes au même élément, seule la dernière sera prise en compte :
Code:

1 2 3 4 document.getElementById("ball").value=input1 ; document.getElementById("ball").value=input2 ; document.getElementById("ball").value=input3 ; document.getElementById("ball").value=input4 ;
17/06/2022, 08h36
GaletUltime

D'accord je prend en compte ton aide et je vais essayer de voir comment je peut résoudre ça cependant il y'a certains point que je ne comprend pas notamment ta questions pour le .getvalue qui est une propriété en JavaScript ensuite pour l'id je n'ai pas le choix étant donné que le tooltip est sur l'image qui elle peut être bougé sur toute la page mais je vais quand même essayer de modifier en prenant en compter ton aide.
17/06/2022, 14h31
GaletUltime

Bon âpres plusieurs essai cela ne marcher toujours pas dans j'aurais encor besoin de votre aide

Citation:

ensuite pour l'id je n'ai pas le choix étant donné que le tooltip

si tu as le choix et cibler et d'utiliser le conteneur.

Citation:

Bon âpres plusieurs essai

Il eut été bon que tu nous indiques lesquels !

Soit le HTML suivant :
Code:

1 2 3 <input id="nom" type="text" value="Oui">  <output id="copie-nom"></output>
la récupération de la valeur se fait avec
Code:

1 2 3 4 5 6 7 // récupération de l'élément puis de sa valeur const elNom = document.getElementById("nom"); const valueNom = elNom.value; // maintenant la copie dans un autre élément autre qu'un INPUT const elCopieNom = document.getElementById("copie-nom"); elCopieNom .textContent = valueNom

Merci beaucoup de ton aide car ça y est cela marche comme je veux donc je te remercie beaucoup je vais passé cet discussion en résolus et je vais bien entendu mettre mon code finale ( inspirer du tiens par conséquent )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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" id="texttooltip">
  <output id="Donné1Res">
    <script type="text/javascript">
    // récupération de l'élément puis de sa valeur
    const donné1 = document.getElementById("donné1");
    const valueDonné1 = donné1.value;
     
    // maintenant la copie dans un autre élément autre qu'un INPUT
    const Donné1tooltip =  document.getElementById("texttooltip");
    Donné1tooltip .textContent = valueDonné1
    </script>
    </output>
 
</span>