2017-03-24 44 views
2

所以我正在使用插件ImageMapster,我正在使用工具提示。ImageMapster javascript插件工具提示沒有顯示正確的位置

問題:

我有這個插件的問題是,當我使用的工具提示其重新定位,你可以在這裏看到下面

enter image description here

正如你看到的我懸停在完全不同暗橙色部分和工具提示正好在圖像中間,並帶有文字「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:

enter image description here

回答

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>' 
},