Mon over ne fonctionne qu'au deuxième passage de la souris

Version imprimable

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:

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:

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

20/04/2012, 14h55
SpaceFrog

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

heuuu....., comment
comme ca

Code:

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
		});
 
	});	
});

20/04/2012, 15h55
SpaceFrog

heu c'est quoi ça ???

Code:

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

=> $(this) tout court !!

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:

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:

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.

20/04/2012, 16h46
SpaceFrog

this est l'objet actuel ... pas besoin de repasser par l'id ...
20/04/2012, 16h59
pierrot10

oui mais j'ai besoin de récupéré l'ID ?
Le this il agit sur l'id par defaut?
Commen distinguer alors le title, la class..?

Mais de toute manière, ca ne resou pas mon problème de hover :?
20/04/2012, 19h23
SpaceFrog

class ou id peu importe this = l'objet

et en effet ça e résoud pas le hover, mais avec un code un peu plus clair et des explications plus précises sur ton souhait d'ergonomie on devrait y arriver ...

Ben j'ai ca

Code:

1
2
3
4
5
6
7
8
9
 
<div id="up_1_tip" style="display:none; width:300px;">Texte</div>
<a class="bubble" id="up_1"><img src="{$img_dir}interogation.png" title="Texte" /></a>
 
<div id="up_2_tip" style="display:none; width:300px;">Texte</div>
<a class="bubble" id="up_2"><img src="{$img_dir}interogation.png" title="Texte" /></a>
 
<div id="up_3_tip" style="display:none; width:300px;">Texte</div>
<a class="bubble" id="up_3"><img src="{$img_dir}interogation.png" title="Texte" /></a>

Quand je passe ma souris sur un des lien, il doit faire apparaitre le <div id=up_x_tip> correspondant.

Pourcela, j'ai cece code qui ne marche pas trop bien car il faut passer la souris une deuxième fois sur le lien

Code:

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
		});
 
	});	
});

Donc y un truc de faux dans mon jQuery et je ne vois pas lequel...

J'ai aussi cette alternative, mais je n'arrive pas a faire monter le div correspondanr au lien

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
 
$(window).bind('load', function() {
	/*
	$("a.bubble").hover(
 
		  function () {
			var id = $(this).attr('id');
 
 
			$('#'+id).bubbletip('#'+id+'_tip', {
				deltaDirection: 'up',
				deltaPosition: 0,
				offsetTop: 0
			});
 
		  }
	);
*/
 
	$('#up_1').bubbletip($('#up_1_tip'), {
		deltaDirection: 'up',
		deltaPosition: 0,
		offsetTop: 0
	});
 
 });

Si je comprends bien le bubble est le div précédant le lien ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function(){
 
	$('.bubble').hover( function() {
 
		$(this).prev("[id^='up_']").bubbletip($(this)), {
			deltaDirection: 'up',
			deltaPosition: 0,
			offsetTop: 0
		});
 
	});	
});

Oui exactement,
Je te remercie pour ta réponse, mais malheureusement ca na emarche pas :(
Quand je passe la souris sur le lien, il disparait.
Je vais étudier ta proposition. Mais merci pour ton aide
Code:

1 2 3 4 5 6 7 8 9 10 $('.bubble').hover( function() { $(this).prev("[id^='up_']").bubbletip($(this)), { deltaDirection: 'up', deltaPosition: 0, offsetTop: 0 }; (J'ai supprimé le ")" car ca me générais un message d'erreur) });

21/04/2012, 13h11
pierrot10
Ca, ca fonctionne
Code:

1 2 3 4 5 6 7 8 9 10 $(window).bind('load', function() { $("#up_3").bubbletip($("#tip_up_3"), { deltaDirection: 'up', deltaPosition: 0, offsetTop: 0 }); });
Sauf que je ne sais pas faire pour si je suis sur l'id up_3 il m'affiche #tip_up_3
Si je suis sur #up_10, il m'affiche #tip_up_10 et aindi de suite.
je vais essayer avec prev()

teste ça

Code:

1
2
3
4
5
 
 
$('.bubble').hover( function() {
 
      alert(	$(this).prev("[id^='up_']").attr('id')  })

Ca me retourne un bon result, soit l'id du div a affiché
j'ai juste modifié car j'ai changé l'id comme ceci #tip_up_[numero]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(window).bind('load', function() {
	$('.bubble').hover( function() {
 
      alert(	$(this).prev("[id^='tip_up_']").attr('id')  );
 
		});
	/*
 
	$('.bubble').hover( function() {
 
	$(this).bubbletip($(this).prev("[id^='tip_up_']").attr('id'), {
		deltaDirection: 'up',
		deltaPosition: 0,
		offsetTop: 0
	});
								 });
 
 
*/
 
 });

Je suis toujours coincé avec mon problème.
mais cette fois ci j'ai pris une autre librairie qui va bien mieu et qui est plus complete.
http://www.maxvergelli.com/jquery-bu...documentation/

Mais j'ai toujours le problème qui est similaire

Cette fois mon code html est plus simple et comme ceci
Code:

1 2 <a class="bubble" title="{$product.name}"><img src="{$img_dir}interogation.png" title="{$product.name}-{'A discount for your articles'}" /></a>
J'aimerais qu'il m'affiche ce qui ce trouve dans title="" de mon lien.
({$product.name} retourne le nom du produit, qui varie en fonction de tous mes liens)

Mon code jquery est le suivant:
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){ $("a.bubble").CreateBubblePopup({ width: 100, themePath: 'modules/hwbubble/js/jquery-bubble-v3/jquerybubblepopup-themes', themeName : 'all-grey', innerHtml: $(this).attr('title') }); });
Ca fonctionne bien sauf qu'il me retiurne toujours le titre du premier lien rencontré.

J'aimerais donc savoir s'il est possible que ma fonction considère uniquement le lien sur lequel ce trouve ma souris, et affiche le title du lien survolé.

Ceci innerHtml: $(this).attr('title') me retourne étrangement le titre de mon page web (<title>tatat</title) alors que je souhaite qu'il retourne le title du lien survoler :lol:

Y-a-pas un moyen pour qu'il considère le lien en survole uniquement??
merci:roll: encore

J'ai trouvé,
c'était propre à la librairie

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(document).ready(function(){
 
		//create bubble popups for each element with class "button"
		$('.bubble').CreateBubblePopup();
 
		//set customized mouseover event for each button
		$('.bubble').mouseover(function(){
 
			//show the bubble popup with new options
			$(this).ShowBubblePopup({
					innerHtml: $(this).attr('title'),
					themePath: 	'modules/hwbubble/js/jquery-bubble-v3/jquerybubblepopup-themes',
					themeName : 'all-grey',
					distance : '5px',
					width: '200px'
			});
		});
});