Tuto > Créer une carte interactive Pb tooltip

Par popsantiago, il y a 13 ans


Les bases HTML/CSS

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, il y a 13 ans

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

popsantiago, il y a 13 ans

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

coloo, il y a 13 ans

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

coloo, il y a 13 ans

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

document.styleSheets[0].cssRules[0].style
  .setProperty(propertyName, propertyValue, 'important');
popsantiago, il y a 13 ans

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

popsantiago, il y a 13 ans

Ou dois-je mettre ce bout de code ?

coloo, il y a 13 ans

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

popsantiago, il y a 13 ans

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.

popsantiago, il y a 13 ans

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)

coloo, il y a 13 ans

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

popsantiago, il y a 13 ans

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

coloo, il y a 13 ans

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

popsantiago, il y a 13 ans

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

coloo, il y a 13 ans

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

popsantiago, il y a 13 ans

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

coloo, il y a 13 ans
//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 ; 
});
popsantiago, il y a 13 ans

Cela fonctionne merci bcp !

Mayzz, il y a 12 ans

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 ?