Custom JQVMap Tips

Question

I have a JQVMap that is currently rendering some data. Each country on the map has a specific color and has a specific number from 0 to 10.

I know how to show tooltips by default, you just switch showTooltip to true and show onmouseover country onmouseover . How can I also show the number corresponding to each country in these tips?

Thanks.

Answer 1

There is an event for onLabelShow. From the documentation ...

onLabelShow function (event, label, code)

A callback function is displayed that will be called before the label. label The DOM object and country code will be passed for callback as Arguments.

Maybe something like this might work for you?

 $(document).ready(function () { jQuery('#vmap').vectorMap({ map: 'usa_en', selectedRegion: 'co', backgroundColor: '#ffffff', color: '#E6E7E9', hoverColor: '#03235E', enableZoom: false, showTooltip: true, onLabelShow: function(event, label, code) { if (states.toLowerCase().indexOf(code) <= -1) { event.preventDefault(); } else if (label[0].innerHTML == "Colorado") { label[0].innerHTML = label[0].innerHTML + " - The state where I live!!"; } }, }); });