Infobulles en jQuery

Version imprimable

J'ai modifié ce code, récupéré dans un autre forum, pour réaliser un hint en jQuery sur des champs d'un formulaire.

Mais voila ça n'a pas marché :roll:

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
38
39
40
41
42
43
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script>
  $(document).ready(function(){
 
    $("input, textarea, select").focus(function () {
         $(this).next("span .hint").addClass('tooltips');
    });
 
	$("input, textarea, select").blur(function () {
         $(this).next("span .hint").removeClass('tooltips')
    });
 
 
  });
  </script>
<style>
   span.hint {
    padding:5px 5px 5px 40px;
	width:120px;
	position:absolute;
	margin: 2px 0 0 14px;
    display:none;
	}
 
   .tooltips{ 
     display:inline;
	 background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>

Ou est l'erreur ?

Merci.

26/01/2009, 01h19
Bovino

Code:

$(this).next("span .hint").addClass('tooltips');

Là, tu cherches des éléments avec la classe hint enfants d'éléments span alors que tu veux en fait des éléments span ayant la classe hint.
Tu peux faire :

Code:

$(this).next("span.hint").addClass('tooltips');

ou :

Code:

$(this).next(".hint").addClass('tooltips');
26/01/2009, 02h22
apt

Bonjour Bovino,

Désolé, mais les deux solutions n'ont pas marchés :?
26/01/2009, 02h45
Bovino
C'est un problème d'héritage en CSS. Ta classe .hint est déclarée avec un taux de précision supérieur à .tooltips donc en cas de conflit sur des règles, c'est elle qui prévaut, du coup le display inline n'est pas appliqué.
Tu peux soit modifier directement le style via JavaScript, soit apporter une précision supérieure à la classe .tooltips, par exemple :
Code:

1 2 3 4 p span.tooltips{ display:inline; background-color:gray; }

Bonjour Bovino,

J'ai redifini mes deux classes dans "le même niveau" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
   .hint {
	padding:5px 5px 5px 40px;
	width:120px;
	position:absolute;
	margin: 2px 0 0 14px;
	display:none;
	background: #fffacd url(images/InlineHelpIcon.png) no-repeat center left;
	border: 1px solid #6495ed;
	}
 
   .tooltips{
	 display:inline;
   }   
  </style>

et ca marche :yaisse2:

26/01/2009, 10h43
apt

Maintenant, je devrais afficher deux infobulles :

1 - Explicative

2 - Alerte, pour message d'erreur.

Ainsi le span sera déclaré comme suit :

Code:

<span class="hint"></span>

Et texte des infobulles sera précisé dans la partie Ajax de mon fichier.

Alors comment "concaténer" les événements "focus" et "blur" avec l'infobulle explicative en premier et les mêmes événements avec l'infobulle d'alerte en cas d'erreur de saisie ?

Merci.

Bonjour,

J'ai un peu modifier le code, mais je n'ai pas encore eu ce que je voulais :(

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="js/ jquery-1.3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
 
   $("input, textarea, select").focus(function () {
        var hint_form=$(this).next(".hint");
        var id_name=($(this).attr("id")); 
        hint_form.empty();
        $(this).next(".hint").addClass('tooltips');
 
   if(id_name=="user"){
        $(this).next(".hint").fadeIn().append("Please enter your " + id_name + ", between 4 and 8 characters");
    }
   else if (id_name=="password"){
        $(this).next(".hint").fadeIn().append("Please enter your " + id_name + ", between 5 and 12 characters");
    }
   else if (id_name=="email"){
        $(this).next(".hint").fadeIn().append("Please enter a valid " + id_name);
    }
   else {$(this).next(".hint").fadeIn().append("Please enter " + id_name);}
 
   });
 
    $("input, textarea, select").blur(function () {
        var name=($(this).attr("name")); 
        var value=($(this).attr("value")); 
        var hint_form=$(this).next(".hint"); 
        $(this).next(".hint").removeClass('tooltips')
        $(this).next(".hint").fadeOut(400);    
 
        if(value==undefined) 
           { 
           hint_form.addClass('rouge')
           hint_form.append("Required"); 
        } 
        else if((name=="user") && (value==""))
            {
            //Validate user value (special characteres)
            hint_form.append("User is required"); 
			hint_form.addClass('rouge') 
        } 
        else if(name=="email") 
            {
            //validate email
        } 
   });
 
 
 });
//]]>
 </script>
<style type="text/css">
  .hint {
       padding:5px 5px 5px 40px;
       width:120px;
       position:absolute;
       margin: 2px 0 0 14px;
       display:none;
       background: #fffacd url(images/InlineHelpIcon.png) no-repeat center
left;
       border: 1px solid #6495ed;
       }
 
  .tooltips {
        display:inline;
  }
  .rouge { 
        color:#FF0000; 
  } 
  .vert { 
        color:#00bb00; 
  } 
 
 
 </style>
</head>
<body>
<div>User Name<br>
 <input id="user" type="text" name="user" />
 <!--Enter User Name-->
 <span class="hint"></span>
</div>
<div>Password<br>
 <input id="password" type="password" name="password" />
 <!--Enter Password-->
 <span class="hint"></span>
</div>
<div>E-Mail<br>
 <input id="email" type="text" name="email" />
 <!--Enter E-Mail-->
 <span class="hint"></span>
</div>
<div>Select<br>
 <select id="select" name="select"></select>
 <!--Select an option-->
 <span class="hint"></span>
</div>
<div>Message<br>
 <textarea id="messgae" name="message"></textarea>
 <!--Your message here -->
 <span class="hint"></span>
</div>
</body>
</html>