Discussion :

[Invité]

Bonjour,

Mon tooltip suit le pointeur de la souris lorsqu'elle entre sur une zone SvgRect.

J'aimerais limiter ce déplacement et faire que mon tooltip se déplace uniquement sur l'horizontal quel que soit la position du pointeur sur la hauteur de mon SvgRect.
Un déplacement linaire horizontal.

https://jsfiddle.net/n7Lm3bdy/

L'action doit, si je ne fais pas erreur être réaliser sur mes "e.page", mais n'ai pas trouvé comment procéder.

Bien cordialement.

[NoSmoking]

Bonjour,

mais n'ai pas trouvé comment procéder.

la position top doit être fixée par rapport à l'élément survolé et non par rapport à la page.

L'événement sur le mousemove est plutôt à mettre sur l'élément survolé cela sera moins gourmand et plus logique.

En résumé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$infobulle = $(".infobulle");
 
$('.enabledinfobulle').hover(function() {
  $infobulle.addClass('active');
  $infobulle.html($(this).attr('id') + '<div class="infobulle-pointer"></div>');
}, function() {
  $infobulle.removeClass('active');
});
 
$('.enabledinfobulle').on('mousemove', function(e) {
  const top = $(this).offset().top - $infobulle.height() - 16;  // le décalage est à ajuster
  $infobulle.css({
    left: e.pageX,
    top: top
  });
});

[Invité]

Bonjour,

Merci pour l'adaptation et cette réflexion plus que pertinente!
C'est bien le résultat voulu.

L'événement sur le mousemove est plutôt à mettre sur l'élément survolé cela sera moins gourmand et plus logique.

Je vais peut-être dire une bêtise mais, l'événement sur le mousemove ne devrait-il pas l'être aussi pour left?
Mes tentatives sur left bloquent le déplacement du tooltip.

Bien cordialement

[NoSmoking]

Je vais peut-être dire une bêtise mais, l'événement sur le mousemove ne devrait-il pas l'être aussi pour left?
Mes tentatives sur left bloquent le déplacement du tooltip.

là je ne saisie pas où tu as un soucis.
On place la tooltip verticalement à la même place pour tout mouvement sur un élément puis on déplace horizontalement celle-ci suivant la position de la souris sur ce même élément.

Le code serait plus propre, et accessoirement plus efficace, écrit de la sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$infobulle = $(".infobulle");
 
$('.enabledinfobulle')
  .hover(function() {
    const top = $(this).offset().top - 40; // le décalage est à ajuster
    // on déplace verticalement
    $infobulle.css({
        top: top
      })
      .addClass('active')
      .html($(this)
        .attr('id') + '<div class="infobulle-pointer"></div>');
  }, function() {
    $infobulle.removeClass('active');
  });
 
$('.enabledinfobulle')
  .on('mousemove', function(e) {
    // on déplace uniquement horizontalement
    $infobulle.css({
      left: e.pageX,
    });
  });

... mais je n'ai peut-être pas bien compris ce que tu as écrit !

[Invité]

D'où mes dires "Je vais peut-être dire une bêtise" !!!

On place la tooltip verticalement à la même place pour tout mouvement sur un élément puis on déplace horizontalement celle-ci suivant la position de la souris sur ce même élément.

J'ai un peu de mal avec (l'élément survolé) et (la page).

J'avais imaginé que le déplacement du tooltip pouvais aussi être géré par rapport à l'élément !
C'est bien le cas avec left: e.pageX.

Désolé pour le malentendu !

Merci pour l'optimisation du code.

[NoSmoking]

J'ai un peu de mal avec (l'élément survolé) et (la page).

• les éléments survolés sont les zones orange réactives, $('.enabledinfobulle')
• la page ben c'est la page