Positionnement d'une info-bulle

Version imprimable

1 pièce(s) jointe(s)

bonjour

je voudrais possitionner mon info-bulle en haut a gauche de ma souris au lieu d'en bas a droite de ma souris mais malheureusement j ai pas des taille fixe pour mes fenetre donc je ne sais pas comment recuperer la taille de ma fenetre et la mettre dans mon code

voici 1 image qui illustre ce que je veux

Pièce jointe 194117

et voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
// création conteneur info-bulle
var oBulle = document.createElement('DIV');
oBulle.id = 'info_bulle';
document.body.appendChild(oBulle);
 
var oClone,
    oInfo = document.querySelectorAll('.HoverfunctionMeps'),
    i, nb = oInfo.length;
 
for (i = 0; i < nb; i += 1) {
  oInfo[i].onmouseover = function(e) {
    e = e || window.event;
    // récup. élément
    oClone = this.querySelector('.bulle');
    if( oClone){
      // copie de l'information
      oClone = oClone.cloneNode(true);
      // contenu visible
      oClone.style.display = 'block';
      // place
      oBulle.style.left = (e.clientX + 10) + 'px';
      oBulle.style.top = (e.clientY + 10) + 'px';
      oBulle.appendChild(oClone);
      // affiche
      oBulle.style.display = 'block';
       oBulle.style.background = '#DAE7FA';
    };
  };
  oInfo[i].onmouseout = function() {
    // vide le contenu
    while (oBulle.firstChild) {
      oBulle.removeChild(oBulle.firstChild);
    }
    // masque
    oBulle.style.display = 'none';
  };
}
 
</script><br><br>

et voici ou je place mon info bulle

Code:

1
2
3
// place
    oBulle.style.left = (e.clientX + 10) + 'px';
    oBulle.style.top = (e.clientY + 10) + 'px';

merci pour vos reponse

04/12/2015, 00h25
ksta.k

Salut,

pour récupérer la taille de la fenêtre tu peut utiliser ceci : http://www.w3schools.com/jsref/prop_win_innerheight.asp

Par contre je me demande si il ne serais pas plus simple de positionner ton infos bulle au dessus des cases directement au lieu de la souris.

Par exemple (sur ton image) imaginons que je positionne la souris sur la case VP à coter de M.

Du coup tu peut récupérer la position absolut avec un effet hover sur ce titre et positionner ton info bull juste au dessus et du coup si tu rend ton infos bulle responsive l'info bulle se redimensionnera automatiquement avec le changement de taille et la position ne changera pas

en tous cas c'est une idée :D
04/12/2015, 11h02
djoufouf

merci pour ta reponse,

c est possible de faire comme tu dis mais je ne sais pas comment l implémenter pour le premier et pour le 2eme,

je suis stagiaire et il me reste pile poil une semaine pour corriger des petit bug sur mon programme

merci pour ton aide

Ha ok,

donc le lien que je tes donner ta t-il servie à récupérer et positionner l'info bulle comme tu voulais?

sinon je me posais la question est ce que ton infos bulle est dans la balise body ou dans une div quand tu passe la souris pour l'effet hover?

sinon pour récupérer la position d'un élément, on trouve des réponses en faisant une recherche.

et du coup si on modifie ton code avec la récupération sa donne ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
    function FindPos(AObject)
    {
        var posX = 0, posY = 0;
 
        do
        {
            posX += AObject.offsetLeft;
            posY += AObject.offsetTop;
            AObject = AObject.offsetParent;
        }
        while( AObject != null );
 
        var pos = [];
        pos['X'] = posX;
        pos['Y'] = posY;
 
        return pos;
    }
 
 
    // récup. élément
    oClone = this.querySelector('.bulle');
    if( oClone){
      // copie de l'information
      oClone = oClone.cloneNode(true);
      // contenu visible
      oClone.style.display = 'block';
      // place
 
 
      /////////////////////////////////////
      // récup. posion élément
      var posElement = FindPos(this);   // <- j'ai mis ici this car je pense que cela correspond à ton élément survoler sinon il faut passer l'élément survoler par la souris
 
 
      oBulle.style.left = (posElement.posX  - this.clientWidth) + 'px';  // <- ici Left = position left de l'élément survoler - la hauteur de l'infos bulle (pour la positionner au dessus)
      oBulle.style.top = (posElement.posY  - this.clientHeight) + 'px';   // <- ici top = position top de l'élément survoler - la hauteur de l'infos bulle (pour la positionner à gauche)
 
 
      oBulle.appendChild(oClone);
      // affiche
      oBulle.style.display = 'block';
       oBulle.style.background = '#DAE7FA';
    };

je pense que c'est ce que tu cherche.

05/12/2015, 22h42
NoSmoking

Il est tout à fait possible de récupérer la largeur de l'élément à afficher, la position du survol, les dimensions de la page, de mélanger tout cela pour savoir où il faut positionner l'infoBulle, à gauche en haut ou en bas à droite en haut ou en bas....

Je dirais simplement qu'une infoBulle ne doit pas contenir un roman mais une information succincte et pertinente.

Dans ton cas au survol, d'après ce que je vois des images que tu nous montres, je ferais apparaître les caractéristiques principales de la personne avec un lien "pour en savoir plus" et au click j'ouvrirais une popin avec la totalité des informations, ta page aura plus de "légèreté" au survol de ton tableau.
07/12/2015, 12h30
djoufouf

Bonjour,

Citation:

sinon je me posais la question est ce que ton infos bulle est dans la balise body ou dans une div quand tu passe la souris pour l'effet hover?

merci pour ta reponse

mon info-bulle est dans une div

comment je met ton code dans le miens car la j ai essayer mais j arrive pas a l implementer

smoking:

je suis stagiaire est c est une reecriture exacte du programme que je dois faire malheureusement

merci a vous en tout cas
07/12/2015, 15h12
NoSmoking

Citation:

c est une reecriture exacte du programme que je dois faire malheureusement

dans ce cas pourquoi réinventer la roue, ... sinon regarde du coté de jQuery, que tu utilises par ailleurs.

Salut,

Citation:

comment je met ton code dans le miens car la j ai essayer mais j arrive pas a l implementer

une fonction javascript comme tu le sait je pense doit être entre les balise script du coup si on reprend ton code du premier post cela donnerais ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<script>
 
    // @desc:  Permet de récupérerla position absolut d'une balise HTML
    // @arg  : AObject Balise HTML 
    function FindPos(AObject)
    {
        var posX = 0, posY = 0;
 
        do
        {
            posX += AObject.offsetLeft;
            posY += AObject.offsetTop;
            AObject = AObject.offsetParent;
        }
        while( AObject != null );
 
        var pos = [];
        pos['X'] = posX;
        pos['Y'] = posY;
 
        return pos;
    }
 
 
// création conteneur info-bulle
var oBulle = document.createElement('DIV');
oBulle.id = 'info_bulle';
document.body.appendChild(oBulle);
 
var oClone,
    oInfo = document.querySelectorAll('.HoverfunctionMeps'),
    i, nb = oInfo.length;
 
for (i = 0; i < nb; i += 1) {
  oInfo[i].onmouseover = function(e) {
    e = e || window.event;
    // récup. élément
    oClone = this.querySelector('.bulle');
    if( oClone){
      // copie de l'information
      oClone = oClone.cloneNode(true);
      // contenu visible
      oClone.style.display = 'block';
 
      /////////////////////////////////////
      // récup. posion élément
      var posElement = FindPos(this);   // <- j'ai mis ici this car je pense que cela correspond à ton élément survoler sinon il faut passer l'élément survoler par la souris
 
 
      oBulle.style.left = (posElement.posX  - this.clientWidth) + 'px';  // <- ici Left = position left de l'élément survoler - la hauteur de l'infos bulle (pour la positionner au dessus)
      oBulle.style.top = (posElement.posY  - this.clientHeight) + 'px';   // <- ici top = position top de l'élément survoler - la hauteur de l'infos bulle (pour la positionner à gauche)
 
      oBulle.appendChild(oClone);
      // affiche
      oBulle.style.display = 'block';
       oBulle.style.background = '#DAE7FA';
    };
  };
  oInfo[i].onmouseout = function() {
    // vide le contenu
    while (oBulle.firstChild) {
      oBulle.removeChild(oBulle.firstChild);
    }
    // masque
    oBulle.style.display = 'none';
  };
}
 
</script><br><br>

@NoSmoking :

Citation:

dans ce cas pourquoi réinventer la roue, ... sinon regarde du coté de jQuery, que tu utilises par ailleurs.

Comme à dit NoSmoking, si tu utilise déjà jQuery tu peut le faire avec.