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 ...

[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

[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 ...

[pierrot10]

Ben j'ai ca

Code :

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

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 :

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

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

[pierrot10]

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

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

[SpaceFrog]

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

Code :

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').hover( function() {
 
		$(this).prev("[id^='up_']").bubbletip($(this)), {
			deltaDirection: 'up',
			deltaPosition: 0,
			offsetTop: 0
		});
 
	});	
});

[pierrot10]

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 :

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

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

[pierrot10]

Ca, ca fonctionne

Code :

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

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

[SpaceFrog]

teste ça

Code :

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

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

[pierrot10]

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 :

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
 
$(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
	});
								 });
 
 
*/
 
 });

[pierrot10]

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

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

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

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

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

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

[pierrot10]

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

Code jquery :

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
 
$(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'
			});
		});
});