Infobulles en jquery et css
Bonjour, je débute en Jquery.
Voici ma problématique:
en m'inspirant du tutoriel suivant:https://www.youtube.com/watch?v=fEDFCCN3xlo,
je voudrai créer des infobulles affichables quand on passe la souris sur différentes div. Voici mon code.
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
| <!DOCTYPE html>
<html>
<head>
<title>une infobulles</title>
<script type="text/javascript" src="./js/jquery-latest.js"></script>
</head>
<body>
<div class="tooltip">
infobulle1
</div>
<div class="text">
?
</div>
<div class="tooltip">
infobulle2
</div>
<div class="text">
?
</div>
<div class="tooltip">
infobulle1
</div>
<div class="text">
?
</div>
<div class="tooltip">
infobulle1
</div>
<div class="text">
?
</div>
<script>
$('.text').hover(function () {
$('.tooltip').css({visibility: "visible",display:"none"}).fadeIn(800).show();
}, function () {
$('.tooltip').css({visibility: "hidden"});
});</script>
</body>
</html> |
CSS:
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
| .text {
border:1px solid #000;
width: 15px;
height: 15px;
text-align: center;
border-radius:15px;
background-color: red;
position:relative;
left:43px;
top:5px;
color: #fff;
cursor: pointer;
}
.tooltip{
background-image: linear-gradient(greenyellow 0%,green 100%);
color: #FFF;
border-radius: 10px;
width: 60px;
height: 20px;
padding: 6px 10px;
text-align: center;
position: relative;
left:15px;
text-shadow:1px 1px 5px #000;
box-shadow:1px 0 10px #690000;
visibility: hidden;
}
.tooltip:after {
content:"\25B8";
color:green;
font-size: 19px;
width: 100%;
left:0;
text-align: center;
position: absolute;
top: 21px;
transform: rotate(90deg);
text-shadow: 1px 0 1px #000;
}
#toto{
background-image: linear-gradient(greenyellow 0%,green 100%);
color: #FFF;
border-radius: 10px;
width: 60px;
height: 20px;
padding: 6px 10px;
text-align: center;
position: relative;
left:15px;
text-shadow:1px 1px 5px #000;
box-shadow:1px 0 10px #690000;
visibility: hidden;
}
#toto:after {
content:"\25B8";
color:green;
font-size: 19px;
width: 100%;
left:0;
text-align: center;
position: absolute;
top: 21px;
transform: rotate(90deg);
text-shadow: 1px 0 1px #000;
} |
Le pb, c'est qur toutes les infobulles s'affichent en même temps., et je ne voudrais que celle liée à la div "text" où je passe ma souris.
j'ai essayé de rjouter un id "toto" dans la div concerné, mais sans succès, je n'ai que le première infobulle qui s'affiche.
Code:
1
2
3
4
5
6
7
8
9
| <script>
$('.text').hover(function () {
$(this).prev().attr('id', 'toto');;
$("#toto").css({visibility: "visible",display:"none"}).fadeIn(800).show();
}, function () {
//var infobulle = $(".infobulle:last");
$("#toto").css({visibility: "hidden"});
});
</script> |
Si quelqu'un pouvais m'aiguiller un peu.., ça serait super sympa.
D'avance merci :-)
