ImageMapster javascriptプラグインのツールチップが正しい位置を表示していません

Question

プラグインImageMapsterを使用していますので、ツールチップを使用しています。

問題：

私はあなたが

の下にここに見ることができるようにあなたは私が上にマウスを移動見ての通り、それは完全に異なる再配置ツールチップを使用したとき、私はこのプラグインを持っている問題がありますダークオレンジのセクションとツールヒントは、画像の中央にテキスト "Te huur"が表示されます。

と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">' 
       } 
        ] 
     }); 

指摘：

を私はセクションの上に置くと、時々、私はエラーを取得します。次のようにエラーがある：

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) 

これはImageMapster JS自体に誤りである、それは変数のコーナーが/ツールチップが設定されていないと述べています。

Jquery.imagemapster.js：

Answer 1

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

ツールチップ内の画像は、最初のページのロード時にロードされていません。これは、最初にツールチップをホバーするとすぐに画像がロードされていることを意味します。

エリアが移動されるとすぐに画像が読み込まれないため、プラグインはtoolTipContainerのデータに基づいて高さ/幅を定義できません。

最初のサイズ（テキストなどの読み込み時間がhttp requestでない要素）をツールチップ内に追加すると効果があります。例えば

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