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

对于未定义的TypeError:无法读取未定义的错误的属性'0‘

工具提示中的图像不会在初始页面加载时加载。这意味着，当您将工具提示悬停(这是第一次)时，图像就会被加载。

由于图像没有在该区域悬停后立即加载，因此插件无法根据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>'
},