Custom Tooltips JQVMap

Question

I have a JQVMap that is currenting visualizing some data. Each country on the map is a specific color and has a specific number from 0-10.

I know how to show default tooltips, you simply switch the showTooltip to true, and it shows the country names onmouseover. How can I also show the number corresponding to each country on these tooltips?

Thanks.

Answer 1

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

onLabelShow function(event, label, code)

Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments.

Maybe something like this could 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!!";
                    }
                },                
            });
        });