javascriptjquerytooltipimagemapster

ImageMapster javascript plugin tooltip isn't showing the right position

So I'm making use of the plugin ImageMapster and I'm making use of the tooltips.

Problem:

The problem I have with this plugin is when I use the tooltip it relocate completely different as you can see here below

enter image description here

As you see i hover over the dark orange section and the tooltip is right in the middle of the image with the text "Te huur".

Here is a example of the section i hover:

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

Pointing out:

Sometimes when I hover on the sections I get a error. The error is as follows : 

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)

This is a error in the ImageMapster js itself, it says that variable corners/the tooltip isn't set.

Jquery.imagemapster.js:

enter image description here

Solution

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

    The image inside the tooltip is not loaded on initial page load. This means that the image is being loaded as soon as you hover the tooltip (for the first time).

    Because the image is not loaded as soon as the area is hovered the plugin can't define a height/width based on the data inside the toolTipContainer.

    If you add an element with an initial size (which has no http request loading time such as text) inside the tooltip it will work.

    For example

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