Discussion :

[apdf1]

Bonjour,

J'ai un code JavaScript pour afficher une infobulle au passage de la souris sur ma carte de France qui fonctionne très bien mais j’aimerai lui apporter une modification. Je m'explique lors passage de la souris, l'infobulle et a droite de mon curseur et j'aimerai quelle se trouve sur la gauche du curseur.

Mon code

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function svgTip(opts) {
  opts = opts || {};
  opts.fontsize = opts.fontsize || "14px";
  opts.padding  = opts.padding || "12px";
//  opts.bgcolor  = opts.bgcolor  || "#FFD700"; //"#FFD700"
  opts.color    = opts.color  || "#000000";    //"#000000";  
  opts.opacity  = opts.opacity || 2.6;
 
 
  $.each( $('[title]', 'svg'), function(id, obj) {
    var tt     = $(this).attr("title"),
        that   = $("<div class='svgtip'>" + tt + "</div>");
 
    that.css({'position': "absolute",
              'top': 0,
              'left': 0,
              'display': "none",
              'backtipground-color': opts.bgcolor,
              'color': opts.color,
              'padding': opts.padding,
              'font-size': opts.fontsize,
              'opacity': opts.opacity,
              'pointer-events' : 'none'
             });
 
    $(this).hover(function(event) {
      that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
      that.addClass("active");
      that.slideDown(100);
    }, function() {
      that.slideUp(100);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop() - that.height()});
      }
    });
    $('body').append(that);
  });
}
 
//new svgTip({fontsize: "20px", padding:"30px"});
new svgTip({fontsize: "20px", padding:"50px"});
 
function lll (msg) { $('#debug').append(msg + "<br/>");}

Je vous remercie d'avance

Cordialement

Max

[NoSmoking]

Bonjour,
la solution est dans la modification de cette ligne

Code :

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

that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});

il te faut retrancher la largeur de l'élément qui est affiché.

[apdf1]

Bonjour NoSmoking

Je te remercie mais je suis nul en Javascript si j'ai compris ton raisonnement je doit travailler sur ceci:

Code :

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

1
2
3
4
 
      that.slideDown(100);
    }, function() {
      that.slideUp(100);

Bonne journée

Max

[NoSmoking]

Non je te parle de récupérer la largeur (width) et de la soustraire à la valeur de left.

[apdf1]

Re,

Non alors je ne sais pas tempi

Bonne journée et merci encore

Max

[NoSmoking]

Qu'est ce que tu ne comprends pas !?!

« récupérer la largeur (width) »
Voir : .outerWidth()


« et de la soustraire à la valeur de left »

Code :

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

1
2
3
4
5
6
7
$(this).on("mousemove", function(event) {
  if (that.hasClass("active")) {
    var larg = that.outerWidth();
    var posX = event.clientX - larg;
    that.css({'left': event.clientX, 'top': posX + $(window).scrollTop() - that.height()});
  }
});