Question

所以我正在使用插件https://stackoverflow.com/a/1669524/633961并且我正在使用工具提示。

问题：

我对此插件的问题是，当我使用工具提示时，它会完全不同，如下所示

如你所见，我将鼠标悬停在深橙色部分上，并且工具提示位于图像中间，并带有文字＆＃34; Te huur＆＃34;。

以下是我悬停的部分示例：

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

ImageMapster javascript插件工具提示并未显示正确的位置

1 个答案: