Discussion :

[pierrot10]

Bonjour,
J'ai fait un petit truc pour qu'une bulle apparaisse au survol de la souris sur un lien.

Ce qui m'étonne c'est que ca ne s'affiche pas la premiere fois, mais la deuxième fois. Mais ensuite si je repasse la souris ca s'affiche de suite.
En fait le problème apparait après le chargement de la page.
Donc la premiere fois que je passe la souris : rien, puis ok

Avez-vous une idée n regardant mon code?

Code jquery :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function(){
 
	$('.bubble').bind('hover', function() {
 
		$('#'+$(this).attr('id')).bubbletip($('#'+$(this).attr('id')+'_tip'), {
			deltaDirection: 'up',
			deltaPosition: 0,
			offsetTop: 0
		});
 
	});	
});

Code HTML :

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

1
2
3
 
 <div id="up_1_tip" style="display:none; width:300px;">Du texte....</div>
 <p>{l s='Discount : '} 5%&nbsp;<a class="bubble" id="up_1"><img src="{$img_dir}interogation.png" title="Texte" /></a>

Merci a tous

[SpaceFrog]

essaye d'initialiser le bubble au départ ... ?

[pierrot10]

heuuu....., comment
comme ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
$(window).bind('load', function() {
	$('.bubble').bind('hover', function() {
 
		$('#'+$(this).attr('id')).bubbletip($('#'+$(this).attr('id')+'_tip'), {
			deltaDirection: 'up',
			deltaPosition: 0,
			offsetTop: 0
		});
 
	});	
});

[SpaceFrog]

heu c'est quoi ça ???

Code :

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

$('#'+$(this).attr('id'))

=> $(this) tout court !!

[pierrot10]

Ben en fait le problème que j'ai c'est que j'ai plusieur article sur ma page.
Et pour chaque article, j'ai une information (qui est en fait la même...).

Ce que j'essaye de faire que si je passe la souris sur le lien "help" (par exemple), il m'affiche une bulle mais pour l'article en question, par pour tous.

Donc j'ai ajouter l'id de l'article à mon lien

Code :

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

1
2
3
4
5
<a class="bubble" id="up_1"><img src="{$img_dir}interogation.png" title="Texte" /></a>
 
<a class="bubble" id="up_2"><img src="{$img_dir}interogation.png" title="Texte" /></a>
 
<a class="bubble" id="up_3"><img src="{$img_dir}interogation.png" title="Texte" /></a>

Ce que j'essaye de faire, c'est que si je passe ma souris sur n'importe qu'elle lien qui a la class bubble, il recupère son id et affiche l'élément qui a le "_tip" en plus.

Par exemple pour "up_3" il affichera "up_3_tip"

avec

Code :

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

1
2
 
$('#'+$(this).attr('id'))

je recupère l'id...
Maitenant, je ne suis pas un mega pro, alors peut etre que on peut faire mieux.

[SpaceFrog]

this est l'objet actuel ... pas besoin de repasser par l'id ...