Image logo on hover using datamaps

I'm working with datamaps. Learning by jumping in to examples.

This is the demo that is provided: http://jsbin.com/nutawiboci/1/edit?html,output

I'm trying to get a logo to show up on the hover - as in mouse over a bubble and you get a string and an image, say img https://www.w3schools.com/tags/smiley.gif

When I try and add this into the popupTemplate using img src="image url here" alt="smiley", the code doesn't run.

popupTemplate: function(geo, data) {
return "<div class='hoverinfo'>It is " + data.name + "</div>";
}

highcharts map add image to tooltip - this is the closest to what I'm looking for, but I still can't get it to work for datamaps.

Could you please help? Thank-you.

The popupTemplate inside the code works, but it is called for the rounded bubbles of the above array. I also tried adding the smiley img and it works fine.

If you want to put a custom popup over geographic regions, you have to add geographyConfig to Datamap initialization, with the popupTemplate, e.g. after the data:

var map = new Datamap({
    ...
    data: {...}

    geographyConfig: {
      popupTemplate: function(geo, data) {
        return "<div class='hoverinfo'>It is " + geo.properties.name + "</div>";
      }
    }
}

Here there is the working sample: http://jsbin.com/zojuqideto/edit?html,output