ImageMapster Javascript-Plugin Tooltip zeigt nicht die richtige Position

Question

So verwende ich das Plugin ImageMapster und ich benutze die Tooltips.

Problem:

Das Problem, das ich mit diesem Plugin ist, wenn ich den Tooltip es ganz anders verlagern verwenden, wie Sie hier unten

sehen können, wie Sie i über sehen schweben der dunkelorange Abschnitt und der Tooltip befinden sich genau in der Mitte des Bildes mit dem Text "Te huur". Hier

ist ein Beispiel für den Abschnitt i schweben:

Und das javascript:

$('#finder-image').mapster({ 
     fill: true, 
     fillColor: 'ffffff', 
     fillOpacity: 0, 
     strokeWidth: 3, 
     singleSelect: false, 
     isSelectable: false, 
     scaleMap: true, 
     altImage: '{{asset('images/map2.svg')}}', 
     selected: true, 
     showToolTip: true, 
     toolTipContainer: '<div class="tooltip-wrapper"></div>', 
     mapKey: 'name', 
     render_highlight: { 
      fillOpacity: 1 
     }, 
     onMouseover: function (options) { 
      $("#finder-" + options.key).children().css('color', "#EF8000"); 
      $("#finder-" + options.key).children().css('font-weight', "bold"); 
     }, 
     onMouseout: function (options) { 
      $("#finder-" + options.key).children().css('color', "black"); 
      $("#finder-" + options.key).children().css('font-weight', "normal"); 

      }, 
      areas: [ 
       { 
        key: '21', 
        toolTip: '<img src 
        {{asset('/images/finder/icon_huur_1.png')}}" class="img-responsive pop-image">' 
       } 
        ] 
     }); 

Aufzeigen:

Manchmal, wenn ich auf den Abschnitten schweben bekomme ich einen Fehler. Der Fehler ist wie folgt:

Uncaught TypeError: Cannot read property '0' of undefined 
at showToolTip (jquery.imagemapster.js:4467) 
at m.AreaData.showToolTip (jquery.imagemapster.js:4559) 
at m.AreaData.<anonymous> (jquery.imagemapster.js:2733) 
at Function.each (jquery.js:374) 
at HTMLAreaElement.mouseover (jquery.imagemapster.js:2731) 
at HTMLAreaElement.me.mouseover (jquery.imagemapster.js:2925) 
at HTMLAreaElement.dispatch (jquery.js:4435) 
at HTMLAreaElement.r.handle (jquery.js:4121) 

Dies ist ein Fehler in der ImageMapster js selbst, heißt es, dass variable Ecken/der Tooltip nicht gesetzt ist.

Jquery.imagemapster.js:

Answer 1

As for the Uncaught TypeError: Cannot read property '0' of undefined error

Das Bild im Tooltip nicht auf ersten Laden der Seite geladen wird. Dies bedeutet, dass das Bild geladen wird, sobald Sie den Tooltip (zum ersten Mal) bewegen.

Da das Bild nicht geladen wird, sobald der Bereich schwebt, kann das Plugin keine Höhe/Breite basierend auf den Daten innerhalb der toolTipContainer definieren.

Wenn Sie ein Element mit einer Anfangsgröße (die keine http request Ladezeit wie Text hat) innerhalb der QuickInfo hinzufügen, wird es funktionieren.

Zum Beispiel

{ 
    key: '1', 
    toolTip: '<img src="{{asset('/images/finder/icon_kaart_0.png')}}" class="img-responsive pop-image"><div style="visibility: hidden;">Area</div>' 
},