Discussion :

[nims]

Bonsoir à tous !

J'ai découvert ce plugin magnifique pour créer des petites bulles : http://craigsworks.com/projects/qtip/docs/


J'ai combiné ceci avec jQueri UI progressBar...

J'ai donc mon code:

Code :

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

1
2
 
<div id="test"></div>

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
 
$().ready(function(){
 
 
    $("#test").progressbar({
        value: barXp
 
    });
 
 
    $('#test').qtip({
        content: "kk",
        show: 'mouseover',
        hide: 'mouseout',
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            }
        },
        style: {
            name: 'cream',
            tip: true
        }
    });
});

Ceci marche parfaitement.

Attention: si je retire la progressBar de #test et que je place du texte simple dans la div, jamais la tooltip apparaitra...

On dirait que progressBar apporte quelque chose au div qui permet de le faire marcher...
Dans la doc rien ne précise qu'il faille mettre quelque chose de particulier à la div concernée.

Je ne comprend pas pourquoi... J'ai regardé les propriétés CSS de la progressBar mais je n'ai rien trouvé de particulier...

Une idée??
Vous utilisez ce plugin ??

Merci d'avance pour votre aide !

[danielhagnoul]

Bonjour.

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
$(function(){
	// attention à la forme abrégée, ce n'est pas $().ready(function(){});
 
	// suggère d'essayer l'appel inverse pour voir si le comportement se modifie
	$('#test').qtip({
		content: "kk",
		show: 'mouseover',
		hide: 'mouseout',
		position: {
			corner: {
				target: 'rightMiddle',
				tooltip: 'leftMiddle'
			}
		},
		style: {
			name: 'cream',
			tip: true
		}
	}).progressbar({
		value: barXp
	});
 
	// vérifier également l'ordre des appels CSS
});

[nims]

Bonsoir,

Merci pour les corrections de syntaxe!

Par contre cumuler progressbar + qTip ça marche...

C'est qTip seul qui marche pas.. même en enlever toutes les progressBar du fichier js...

Pour tester j'ai placé un alert avant et après. Celui après le code qTip ne fonctionne jamais... même avec le strict minimum...

Comprend pas :s

-- Edit --

qTip 1.0.0 ne fonctionne pas avec jQuery > 1.3.2

Modification à apporter à jquery.qtip-1.0.0-rc3.min.js ligne 15, caractère 2286 :

Remplacer ceci:

Code :

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

 if(typeof f(this).data("qtip")=="object")

Par

Code :

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

if(typeof f(this).data("qtip")=="object"&&f(this).data('qtip')!==null)