Infobulle et scroll de la page

siriu
Javascript

Bonjour,

Dans le tutoriel sur la carte interactive, il y a ce bout de code qui sert à afficher une infobulle lorsqu'on survole une région.
Le problème avec ce code, c'est que si on a scrollé un peu avec le navigateur, l'infobulle est décalée de la carte (elle sera plus bas).

Je comprend le problème mais je ne vois pas trop comment le résoudre, pouvez vous me mettre sur la piste svp...

// Tooltip qui suit la souris
                $(document).mousemove(function(e){
                    $('.map .tooltip').css({
                      top:e.pageY-$('.map .tooltip').height()-20,
                      left:e.pageX-$('.map .tooltip').width()/2-10
                    });
                });

5 réponses

Grafikart
Réponse acceptée

$('.map').offset().top pour avoir la position par rapport à en haut :)

Grafikart

Tu peux ajouter à la hauteur scrollTop pour avoir la position même avec le scroll :)

siriu
Auteur

Merci chef Grafikart :)

J'ai fait ça :

//top:e.pageY-$('.map .tooltip').height()-20 ,

top: 440 - $(document).scrollTop() ,

Qu'en penses tu ?

J'ai été obligé de trouvé une valeur qui me va bien "440"... car je n'ai jamais réussi à récupérer la distance entre le top de la page et ma carte... le scroll top semble ne fonctionner qu'avec "document" non ?

siriu
Auteur

thanks you :)

cmc

Salut, un grand merci pour ta question.

En faisant un mix du code de départ et de ton code, j'ai fait ça :

top:e.pageY-$('.map .tooltip').height()-20-$(document).scrollTop(),

et ça fonctionne parfaitement ! (...sauf sur ie7 et inférieur sinon ce serait pas drôle!)

En espérant que ça puisse t'aider.