Discussion :

[GaletUltime]

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

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

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

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

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

Merci d'avance pour votre aide.

[NoSmoking]

Bonjour,

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

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

1
2
<div class="tooltip" id = "ball">
  <img class="size_of_img" id="ball" ...>

Où as-tu trouvé getvalue :

Code :

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

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 :

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

1
2
3
4
document.getElementById("ball").value=input1 ;
document.getElementById("ball").value=input2 ;
document.getElementById("ball").value=input3 ;
document.getElementById("ball").value=input4 ;

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

[GaletUltime]

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

[NoSmoking]

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.

Bon âpres plusieurs essai

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

Soit le HTML suivant :

Code html :

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

1
2
3
<input id="nom" type="text" value="Oui">
<!-- du HTML -->
<output id="copie-nom"></output>

la récupération de la valeur se fait avec

Code :

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

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

[GaletUltime]

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