plugin BubblePopup. Modifier le innerhtml pour chaque element

Version imprimable

Bonjour,

J'ai un script jQuery :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $('#Boutton').CreateBubblePopup({ position : 'top', align : 'center', innerHtml: 'Message bulle', innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'}); }); });
Je voudrais pouvoir intégrer ce code directement dans ma page en passant des paramètres :

par exemple :

Code:

OnMouseOver="AfficherBulle('Message')"

Est-ce possible ?

Merci

02/01/2011, 20h33
SpaceFrog

Code:

.CreateBubblePopup

se charge du mouseover ...

"Boutton" étant l'id de lelement qui doit declencher l'affichage au survol
et le message etant dans les paramètres

Code:

innerHtml: 'Message bulle',
02/01/2011, 21h02
Khleo

Oui le script fonctionne très bien tel qu'elle, mais il est difficile de le rendre dynamique car le message est stocké dans l’entête de la page.

Ça pose problème si je veux afficher 10 bulles différentes dans le même page.

Merci

rien ne t'empeche de stocker le message dans le alt de la balise
et d'attribuer les bubbles au moyen d'une classe
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){ $('.bubble').CreateBubblePopup({ position : 'top', align : 'center', innerHtml: $(this).attr('alt'), innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'}); }); });
Code:

<div class="bubble" alt="message à afficher"> ...

Ca ne semble pas fonctionner :

Code:

1
2
3
4
5
6
7
$(document).ready(function(){
     $('.TestClass').CreateBubblePopup({
          position : 'top',
          align	 : 'center',
          innerHtml: 'Message: '+$(this).attr('alt'),
          innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
});

Code:

<div class="TestClass" alt="Txt de la bulle">BlaBla</div>

Il m'affiche : Message: undefined

Merci

03/01/2011, 08h13
SpaceFrog

Tu peux nous mettre le lien vers la le plugin que je puisse le telecharger et tester ?
03/01/2011, 11h05
danielhagnoul
Bonjour

Liens utiles :
- http://plugins.jquery.com/project/jqBubblePopup
- http://maxvergelli.wordpress.com/jquery-bubble-popup/
04/01/2011, 14h37
Khleo

Le problème vient du $(this) car quand je fais

Code:

innerHtml : $('#BouttonPartager').attr('alt')

il me retourne bien l'attribut alt.

Dans la documentation technique ils mettent :

Citation:

SetBubblePopupInnerHtml : The function sets permanently the "innerHtml" of all Bubble Popups associated to the elements in the set of matched elements;
it takes an optional parameter to know if the new "innerHtml" must be saved permanently or not, by default is true.
Note: before using this function, you must call the function .CreateBubblePopup()

Mais je n'arrive pas à l'utiliser, je n'ai trouvé aucun exemple ...

Merci

modifie le innerHTML sur le mouseneter

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready(function(){
     BubbleOptions={
		          position : 'top',
       		   align	 : 'center',
		          innerHtml: '',
       		   innerHtmlStyle: {color:'#000000', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'
       		   }
     $('.TestClass').CreateBubblePopup(BubbleOptions).mouseenter( function(){$(this).SetBubblePopupInnerHtml('Message: '+$(this).attr('alt'),false) });
 
});
</script>
</head>
<body>
<div class="TestClass" id="foo" title="Txt de la bulle">BlaBla</div><div class="TestClass" title="autre Texte de la bulle">BlaBla</div>
 
</body>

Ici j'ai utilisé title pour être plus correct, mais fonctionne aussi avec alt ..

Merci beaucoup !

J'ai effectué quelques modifications car il affichait de temps à autre des bulles vides :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function(){
    $('.TestClass').CreateBubblePopup({
		          position : 'top',
       		          align : 'center',
		          innerHtml: '',
       		          innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
 
	$('.TestClass').mouseenter(function()
	{
		$(this).SetBubblePopupInnerHtml($(this).attr('alt'), true)
	})
});
</script>

Code:

1
2
<div class="TestClass" alt="Txt de la bulle">BlaBla</div>
<div class="TestClass" alt="autre Texte de la bulle">BlaBla</div>

Et à priori ça fonctionne sur tous les navigateurs.

Merci