Infobulles en jQuery

**apt** · 25/01/2009, 22h58

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é

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

**Bovino** · 26/01/2009, 01h19

Code :

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

$(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 :

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

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

ou :

Code :

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

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

**apt** · 26/01/2009, 02h22

Bonjour Bovino,

Désolé, mais les deux solutions n'ont pas marchés

**Bovino** · 26/01/2009, 02h45

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

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

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

**apt** · 26/01/2009, 10h33

Bonjour Bovino,

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

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

**apt** · 26/01/2009, 10h43

Maintenant, je devrais afficher deux infobulles :

1 - Explicative

2 - Alerte, pour message d'erreur.

Ainsi le span sera déclaré comme suit :

Code :

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

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

**apt** · 28/01/2009, 13h04

Bonjour,

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

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

Infobulles en jQuery

jQuery

Discussions similaires

Partager

Partager