Discussion :

[zouzou99]

Bonjour,

j'utilise qtip pour mes tooltips.

J'essaie de m'enservir pour un formulaire : la définition de mon tooltip avec qtip est donc tjrs identique, sauf le texte qui varie lorsque je passe d'un champ à l'autre.
Or, il ne varie pas, il prend tjrs la valeur du premier champ.
J'ai un pb évident d'initialisation ou de mouseover() non actif, mais je ne sais pas comment résoudre, je suis loin d'être un pro sur javascript.

Voici mon Html sur deux ligne de formulaires:

Code html :

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

1
2
3
4
5
6
7
8
<div id="ligne-formulaire">	
	<h4>Adresse Mail </h4>
	<p id="jsform" nameform="email"><%= f.text_field :email, :maxlength => Person::MAX_EMAIL, :class => "text" %></p>
</div>
<div id="ligne-formulaire">
	<h4>Pseudo </h4>
	<p id="jsform" nameform="pseudo"><%= f.text_field :name, :maxlength => Person::MAX_NAME, :size => 16, :class => "text" %></p>
</div>

Et le code js qui pose soucis, avec les 7 premières lignes qui posent soucis:

Code :

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
			var name = $("p[id=jsform]").attr("nameform");
			if (name=="email"){
   				var contentjs = 'Ne sera jamais rendu public';
			}
			if (name=="pseudo"){
   				var contentjs = '16 caractères maximum';
			}
 
			$("p[id=jsform]").qtip({					
					content : contentjs,
   					show: 'mouseover',
   					hide: 'mouseout',
					position: {
                  	 corner: {
                      tooltip: 'leftTop', // Use the corner...
                      target: 'rightBottom' // ...and opposite corner
                     }
					},
					style: { 
  					 background: '#A2D959',
      				 color: 'black',
      				 textAlign: 'center',
      				 border: {
         			  width: 1,
         			  radius: 2,
         			  color: '#CA7DAB'
      						 },
					 tip: { 
         			  corner: 'leftMiddle', 
         			  color: '#CA7DAB',
         			  size: {
            			x: 7, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            			y: 7 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         			  }
					 },
      				 width: 200
					},
					show: { effect: {type: 'slide' } }
  			})

Merci par avance pour toute aide!

Fred

[zouzou99]

J'y suis pas arrivé comme ça, je me suis donc servi d'autres tags, et cela est même plus simple...
Faut que j'apprenne à lire les docs...

Merci pour ceux qui ont cherché

je suis passé par le title dans le html, que j'ai repris dans la fonction de qtip qui permet de s'en servir dans le content

Code html :

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

1
2
3
4
5
6
7
8
<div id="ligne-formulaire">	
							<h4>Adresse Mail </h4>
							<%= f.text_field :email, :maxlength => Person::MAX_EMAIL, :class => "text", :title => "Ne sera jamais rendu public" %>
						</div>
						<div id="ligne-formulaire">
							<h4>Pseudo </h4>
							<%= f.text_field :name, :maxlength => Person::MAX_NAME, :size => 16, :class => "text", :title => "16 caractères maximum" %>
</div>

le js:

Code :

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
			$("#content input[id][title]").qtip({
					//content : contentjs,
					content: {text: false},
   					show: 'mouseover',
   					hide: 'mouseout',
					position: {
                  	 corner: {
                      tooltip: 'leftMiddle', // Use the corner...
                      target: 'rightMiddle' // ...and opposite corner
                     }
					},
					style: { 
  					 background: '#A2D959',
      				 color: 'black',
      				 textAlign: 'center',
      				 border: {
         			  width: 1,
         			  radius: 2,
         			  color: '#CA7DAB'
      						 },
					 tip: { 
         			  corner: 'leftMiddle', 
         			  color: '#CA7DAB',
         			  size: {
            			x: 7, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            			y: 7 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         			  }
					 },
      				 width: 200
					},
					show: { effect: {type: 'slide' } }
  			})

J'espère que cela permettra à un autre étourdi de s'en tirer