Infobulles en jquery et css

**fred39** · 20/05/2016, 15h53

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

**Toufik83** · 20/05/2016, 18h39

bonjour,
utilisez la balises[CODE] pour mieux voir votre code.
normalement il faut avoir un seul Div.tooltip et vous jouez avec $.text() et $.html(), mais si vous voulez continuer comme ça voilà un petit code qui pourrait vous aider :https://jsfiddle.net/Toufi9/5mwak2ww/

Invité · 20/05/2016, 18h56

Bonjour,

Code javascript :

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

1
2
3
4
$(document).ready(function() {
   $('.text').hover(function() {
      $(this).prev('.tooltip').css({
...

prev() : balise précédente
next() : suivante

**fred39** · 20/05/2016, 20h46

Merci pour votre réponse

Envoyé par Toufik83

normalement il faut avoir un seul Div.tooltip et vous jouez avec $.text() et $.html(),

y a t'il une meilleure solution, sachant que cette page est créée par une boucle php, et qu'il peut y avoir beaucoup plus que 4 occurences?

Envoyé par Toufik83

mais si vous voulez continuer comme ça voilà un petit code qui pourrait vous aider :https://jsfiddle.net/Toufi9/5mwak2ww/

Désolé, je ne comprends pas la fonction de ces lignes

Code :

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

1
2
3
4
5
6
7
8
9
 Index==1 
  		? Index=0
      :Index==3
      	? Index=1
        :Index==5
        	? Index=2
          :Index==7 
          	? Index=3
            :"";

Merci :-)

**fred39** · 20/05/2016, 22h21

Envoyé par jreaux62

Bonjour,

Code javascript :

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

1
2
3
4
$(document).ready(function() {
   $('.text').hover(function() {
      $(this).prev('.tooltip').css({
...

prev() : balise précédente
next() : suivante

Avec cette solution, c'est impeccable
merci jreaux62

Infobulles en jquery et css

jQuery

Discussions similaires

Partager

Partager