Infobulle sur carte de france

Version imprimable

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:

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

19/06/2017, 14h38
NoSmoking

Bonjour,
la solution est dans la modification de cette ligne

Code:

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

il te faut retrancher la largeur de l'élément qui est affiché.
19/06/2017, 16h20
apdf1
Bonjour NoSmoking

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

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

Max
19/06/2017, 18h40
NoSmoking

Non je te parle de récupérer la largeur (width) et de la soustraire à la valeur de left.
19/06/2017, 18h53
apdf1

Re,

Non alors je ne sais pas tempi

Bonne journée et merci encore

Max

:koi: 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:

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()}); } });