Search code examples
jqueryinternet-explorerjvectormap

jvectormap marker label placed above mouse IE

I have a problem with jvectormap on Internet Explorer only.

When I hover over the marker in the region, the label is displayed above the marker. I still can see the mouse but cannot click the marker to open a link or anything. So it's just flickering when i move the mouse a little bit.

Code for displaying the label:

onMarkerLabelShow: function(event, label, index){
            label.html(
                '<b>'+label.html()+'</b><br />'+
                markers[current_country][index].html
            );
        },

The thing is, if I remove the markers text and just display the headline, which is between the <b> tags, its working fine.

Probably the text after the <br/> is too long? Or am I able to place the label for IE on other positions?

Solution

  • The problem are line breaks. It does not work correctly in the IE with br and p tags, and it also does not work with clear:both.

    It is a dirty workaround, but it works like a charm:

    Right before the "label.html" call, put in this line of code:

    label.css('left',-200);

    It will still work correctly in Firefox and Chrome, and no problem in IE anymore.