Tooltip Bubble a la Souris(X,Y)

CodeIX Messages postés 60 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 28 novembre 2009 - 20 juin 2009 à 20:38
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 - 21 juin 2009 à 18:31
Bonjour, je suis en train d'apprendre Javascript, et j'aimerais comprendre ce qui ne marche pas dans mon code.
J'essaie de creer un Tooltip qui se placera a la position de ma souris, et qui fonctionnera sous IE et Firefox. Pour l'instant le mouseover et mouseout fait bien apparaitre et disparaitre le tooltip mais pas a l'endroit(souris x,y) que j'aimerais l'avoir.

Que doit-je modifier?

Merci d'avance!

Voici mon code actuel:
-----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.onmousemove = getMousePos;
        var posX=0, posY=0;
       
        function getMousePos(e){
            if (document.all) {
                posX=event.offsetX;
                posY=event.offsetY;
            }
            else{
                posX=e.pageX;
                posY=e.pageY;
            }
            /*document.title=""+posX+", "+posY+")";*/
        }
       
        function overBubble(){
            document.getElementById("divbubble").style.top=posX;
            document.getElementById("divbubble").style.left=posY;
            document.getElementById("divbubble").style.display="inline";
        }
       
        function outBubble(){
            document.getElementById("divbubble").style.display="none";
        }
    </script>
</head>

    <!-- Bubble Div-->
   

        Ceci est un test!...
   

   
    <!-- Bubble Div(End)-->
   
    Testing... Testing... Testing... Testing... Testing... Testing... Testing...
   
   

</html>

5 réponses

@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
20 juin 2009 à 20:53
bonjour
tu oubli de mettre px

document.getElementById("divbubble").style.top=posX+'px';
document.getElementById("divbubble").style.left=posY+'px';
0
CodeIX Messages postés 60 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 28 novembre 2009
20 juin 2009 à 21:02
Merci de la reponse.

Je vient de modifier en ajoutant 'px' mais ca ne change rien. Mon div ne se positionne pas a ma souris. :(
0
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
20 juin 2009 à 21:32
tu inverse les position

document.getElementById("divbubble").style.top=posY+"px";
document.getElementById("divbubble").style.left=posX+"px";
0
CodeIX Messages postés 60 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 28 novembre 2009
20 juin 2009 à 21:38
Ah enfin ca fonctionne. ;)

Merci beaucoup, c'etais banal comme probleme.

Sais tu comment je fait pour que, exemple, si je mouseover une ligne de text et que le tooltip apparait, si je me deplace sur cette meme ligne que le tooltip se deplace avec ma souris? Tant et aussi longtemps que je suis sur la ligne qui appel la fonction overBubble()?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
21 juin 2009 à 18:31
si tu met l'ensemble dans un div tu te sert du div pour le on mouseout
0