jquery - jvectormap: How to implement HTML instead of simple string in the markers label/tooltip?

Question

I've just implemented the jQuery plugin jvectormap, for the use of a world map. Everything's working perfectly, except this maybe.. I added a few markers and have been trying to implement HTML to the markers label/tooltip. So instead of just "blabla" I want an image/html to show up, when hovering the marker.

How can I achieve this result?

Here's the initializing JS:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "<img src="img/logo.png">"}
    ],
...(other code isn't important)...

The important part is name: "<img src="img/logo.png">"

Thanks for the help!!

Answer 1

If you want to customize the label/tooltip that is displayed when you mouse over the marker, you should provide a function for onMarkerLabelShow.

onMarkerLabelShow Function (Event e, Object label, String code) Will be called right before the marker label is going to be shown.

For example:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "My marker name"}
    ],
    onMarkerLabelShow: function(event, label, code) {
     label.html("<img src="img/logo.png"><br>"+ label.html());                
    }
});