Search code examples
jqueryjquery-pluginspluginstooltipjvectormap

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


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!!


Solution

  • 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());                
        }
    });