multiple coda bubble

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:

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:

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:

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 ?