Bonjour,

Je viens de refaire ma propre carte de France/regions à l'aide du tutoriel suivant http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177 ca le fait pas mal du tout ! Encore merci.

Mais j'ai un petit souci avec le tooltip que je ne sais pas du tout fixer... Il se balade un peu partout et ne semble pas tenir compte du height défini dans le js...
J'ai posté ici plutot que dans le forum jquery car je pense que c'est plus lié à mes "postion" css que le js en lui même...

Avez vous des idées ?

Dites moi si vous souhaitez avoir l'url pour le check (sachant qu'il faudra que je vire le mode maintenance.

Merci,

Pop

19 réponses


coloo
Réponse acceptée
//toolistblabla
 $(document).mousemove(function(event){
 var elt = document.body;
 var iii = elt.scrollTop +20;

$('.map-regions .tooltip').css({
top:event.pageY-$('.map-regions .tooltip').height()-iii,
left:event.pageX-$('.map-regions .tooltip').width()/2-10
});
//document.getElementById('coucou').innerHTML = iii ; 
});

ben si y a possibilité oui envoie le lien et un screen avec l'élement encadré en rouge que tu veux fixer ^^

Salut,
J'ai fait un fix à ma façon... (virer la fonction // Tooltip qui suit la souris
Dans l'idée ca me va...
Mais je veux bien que tu m'expliques ce qui pose problème pour ma culture G, et pour au cas ou pouvoir remettre la fonctionnalité.
http://www.comptoirdesentreprises.com/

Popsantiago

Ce que j'ai fait a défaut de mieux

Et du coup je t'ai remis la map dans l'état qui déconne.

je n'ai pas acces a ton site :) Postes quand tu auras résolu ce problème ^^'

Humm... je ne sais pas ce qui c'est passé... dsl
Ca semble être bon.

tu es sur quel navigateur ? sur google chrome il n'y a pas de problème, le panneau est juste en dessus de la souris enfin ça me choque pas :p

Essaye de rajouter un !important dynamiquement si y a un problème.

document.styleSheets[0].cssRules[0].style
  .setProperty(propertyName, propertyValue, 'important');

Et bien écoute je ne sais pas trop quoi dire...
Chez moi le tooltip bouge en fonction de mon scroll visiblement...

Ou dois-je mettre ce bout de code ?

En arrivant sur la page ça fonctionne ne faisant rien d'autre qu'un survol de Nord-pas-de-Calais.

Mais après quelques scrolls vers la bas c'est le bordel...

As tu les mêmes résultats de ton coté (sous chrome)

Ah maintenant ça merde :p sur google chrome, je pense que je voyais le rendu quand tu avais supprimé la fonction.

le code que je t'ai mis est théorique ein. Il faudrait le mettre sur le js map-region.js.
//Tooltip qui suit la souris

Ca serait pas mal de tracer la valeur height de .tooltip aussi :)

Aie, ca devient trop compliqué pour moi...
J'ai rajouté comme ceci :

// Tooltip qui suit la souris
$(document).mousemove(function(event){
document.styleSheets[0].cssRules[0].style;
.setProperty(propertyName, propertyValue, 'important');
$('.map-regions .tooltip').css({
top:event.pageY-$('.map-regions .tooltip').height()-20,
left:event.pageX-$('.map-regions .tooltip').width()/2-10
});
});

Qu'appelles-tu tracer le height ? (en js?)

En js je suis une bille...

euh je t'ai mis du code qui a des noms bateaux pour s'y retrouver :) par exemple property value pour un width pourrait être 200 :p

Efface ce que tu viens de mettre =) j'ai l'impression que c'est ton height qui change à chaque fois ^^'.

Voila, j'ai effacé le code rajouté...
Dsl

En effet, il me semble que c'est le height qui se balade... t'as une idée pour fixer cela ?

Sinon, ne t'inquietes pas, je reviens au tooltip dans le coin... =/

bon je suis une bille en js aussi mais essaye ça :

//
var elt = document.body;
//toolistblabla
 $(document).mousemove(function(event){
$('.map-regions .tooltip').css({
top:event.pageY-$('.map-regions .tooltip').height()-20+(elt.scrollTop),
left:event.pageX-$('.map-regions .tooltip').width()/2-10
});
});

je te garantie rien :p, je ne suis qu'un honnête bidouilleur :p

Coloo ça ne semble pas fonctionner ...

Merci pour ton aide, je laisse ouvert pour voir si quelqu'un peut avoir la solution et en attendant je remets le Tooltip dans le coin.

Pop

tu peux me passer la source de la map via mail@mail.mail

Histoire que j'y jette un oeil.

Mon test avec une page bien moche marche chez moi :p

un tuto qui devrait t'aider : http://www.finalclap.com/tuto/float-fixed-scroll-jquery-css-rocket-83/#

en le mettant dans l'event ?

edit: j enleve mon mail.

Cela fonctionne merci bcp !

popsantiago Bonjour excuse moi je rencontre le même problème que tu as rencontré j'ai pris le tutoriel de Coloo mais hélasse je n'arrive pas à le placer, automatiquement plus rien ne fonctionne! serais-tu m'aider en me disant comment tu as fait pour que cela fonctionne ?