Bonjour, je débute en Jquery.
Voici ma problématique:
en m'inspirant du tutoriel suivant:
,
je voudrai créer des infobulles affichables quand on passe la souris sur différentes div. Voici mon code.
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
<!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 CSS : 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
.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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 :-)