Discussion :

[flop25]

Bonjour,
mon but est de faire des tooltips avec le script 'coda' d'ici http://jqueryfordesigners.com/coda-popup-bubbles/
Or mon besoin fait que le trigger et la pop-up ne sont pas côte à côte mais ainsi :

Code :

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

1
2
3
4
5
 
<div class="bubble_trigger">
<a href="javascript:void(favoris()); " class="trigger" title="Ajouter cette page dans vos favoris" ><img src="./banniere/icone/favorite.png" alt="Favoris" width="22" height="22" /></a>
<a href="./forum/" class="trigger"  title="Visitez le forum"><img src="./banniere/icone/forum.png" alt="Forum" width="22" height="22" /></a>
</div>

Code :

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

1
2
3
4
5
6
<div class="bubbleInfo">
<img src="./banniere/icone/my_emote.png" alt="emote" width="22" height="22" />
<table id="dpop" class="popup" dont je passe le code >
  <div class="popup-contents">contenu</div>
</balises de fin de table>
</div>

j'ai donc adapter avec succès le code js du script 'coda'

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
 
$('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;
 
            var hideDelayTimer = null;
 
            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', '.bubble_trigger'); //ici !!
            var info = $('.popup', this).css('opacity', 0);
 
 
            $([trigger.get(0), info.get(0)]).mouseover(function () {
				title = $('.trigger').attr('title'); //ici !!
				jQuery('.popup-contents').html(title); //ici !!
				$('.trigger').attr('title',''); //ici !!
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;
					pos = $('#dpop').findPos();
				   info.css({
 
			top: -140,
                       left: -80,
 
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
 
                return false;
            }).mouseout(function () {
                if (hideDelayTimer) { clearTimeout(hideDelayTimer); }
                hideDelayTimer = setTimeout(function () {
					title = $('.popup-contents').html(); //ici !!
					$('.trigger').attr('title',title); //ici !!
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });
 
                }, hideDelay);
 
                return false;
            });
        });
    });

Mais je n'arrive pas et ne sais pas encore comment faire pour ça marche pour tous les liens .trigger car actuellement seul le premier est actif
Pourriez-vous m'aider svp ?

[flop25]

Bonjour merci de votre aide, j'aurais ben aimer que qqun me dise ce qu'étais each et le fait qu'il soit sur le mauvais sélecteur
Sinon j'ai donc réussi mais (parce qu'il y en a tjrs un) j'ai un léger 'bug' si on peut dire ça
Lorsque qu'une icone est survolée la bulle apparaît, puis survoler une autre et revenez immédiatement sur la précédente icone : le tittle n'a pas eu le temps de revenir dans le a.trigger et du coup rien ne s'affiche. Quitter l'icône attendez 1sec et revenez et le tittle est revenu.

voilà mes modif :

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
    $(function () {
 
		$('.trigger').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;
 
            var hideDelayTimer = null;
 
            var beingShown = false;
            var shown = false;
            var trigger = $(this);
            var info = $('.popup', '.bubbleInfo').css('opacity', 0);
 
 
            $([trigger.get(0), info.get(0)]).mouseover(function () {
				title = $(this).attr('title');
				jQuery('.popup-contents').html(title);
				$(this).attr('title','');
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;
					pos = $('#dpop').findPos();
				   info.css({
                        //top: -90,
                         //left: -33,
						top: -60,
                       left: -80,
 
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
 
                return false;
            }).mouseout(function () {
                if (hideDelayTimer) { clearTimeout(hideDelayTimer); }
                	title = $('.popup-contents').html();
					$(this).attr('title',title);
					hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });
 
                }, hideDelay);
 
                return false;
            });
        });
    });

un lien pour voir :
http://flop25.free.fr/site.php?font_...mal&ok=Valider