Discussion :

[Rifton007]

Bonjour à tous et merci d'avance pour votre aide.

J'ai crée une carte interactive à l'aide de la librairie Raphael.js.
Je souhaiterais lors du passage de la souris sur l'une des régions, qu'une bulle (tooltip de UI jQuery) s'affiche.

Hors après plusieurs tentative, je n'ai pas réussi.
Pensez-vous que cela soit possible ?

Merci

[danielhagnoul]

Bonsoir

Cela semble possible, exemples :

1. http://www.itbrigadeinc.com/post/201...n-Raphael.aspx
2. http://stratha.us/raphael_js_tooltip

[Rifton007]

Oui effectivement avec des plug-in comme qTip c'est possible.

Mais étant donné que j’intègre et utilise déjà UI jQuery - tooltip pour le reste du site.
J'ai préféré n'utiliser que celui-ci, évitant ainsi de charger deux plug-in qui font la même chose.

Hors après quelque tentatives, je doute que UI jQuery puisse prendre en compte des objets vectoriels créer sous Raphael, d'où ma question.

Merci à vous,

[danielhagnoul]

qTip est un plugin jQuery, donc jQuery UI devrait fonctionner, en modifiant l'exemple qTip :

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
$( function(){
 
    var paper1 = new Raphael( "canvasDiv", 600, 400 );
 
    paper1.safari();
    paper1.setViewBox( 430, 220, 200, 150, true );
 
    var MO = paper1.path( "m 558.4,248.1 -2.5,-3.0 ... z" );
 
    MO.attr({ 
        "fill" : "#FFFFFF",
        "stroke" : "#000000", 
        "stroke-width" : 1, 
        "stroke-linejoin" : "round", 
        "fill" : "#888",
        "title" : "Je réponds à la demande : \"j'ai vu vos liens, mais je n'y comprends rien, faites-le à ma place\""
    });
 
    $( MO.node ).tooltip();
 
});

[Rifton007]

Désolé pour ce retard, j'était en déplacement.

Alors j'ai tout essayé, mais je n'y suis pas parvenu.

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
 
 
$(document).ready(function($) {
var paper = new Raphael(document.getElementById('iMap'), 650, 500);
 
var town = [];
town.zip1000 = paper.path("...");
town.zip1001 = paper.path("...");
town.zip1002 = paper.path("...");
 
town.zip1000.attr({fill: colorOrigin[0], title: "town A"}); 
town.zip1001.attr({fill: colorOrigin[0], title: "town B"}); 
town.zip1002.attr({fill: colorOrigin[0], title: "town C"}); 
 
 
//J'ai essayé ces cinq possibilité, mais cela ne m'affiche rien.
	$(town.zip1000.node).tooltip();
	$(town.zip1000).tooltip();
	$(town).tooltip();
	$(town.node).tooltip();
	$(town["zip1000"].node).tooltip();
 
});

[danielhagnoul]

Bonsoir

Vous n'avez pas oublié d'ajouter un attribut "title" au path SVG ?

Je peux vous assurer que le truc fonctionne bien, voir un code récent où je l'utilise : http://www.developpez.net/forums/d13...5/#post7470133