DarkTakua DarkTakua - 5 months ago 68
jQuery Question

jqvMap Custom Tooltips

I do realize that the other jqvMap custom tool tips topic was already answered, however, that solution did not work for me.

Here is my current jqvMap code for jQuery:

jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'usa_en',
enableZoom: true,
showTooltip: true,
selectedColor: null,
hoverColor: null,
backgroundColor: '#fffff',
colors: {
fl: '#016ea1',
ma: '#016ea1',
md: '#016ea1',
wa: '#016ea1',
mn: '#016ea1',
ny: '#016ea1',
wi: '#016ea1',
hi: '#016ea1',
vt: '#016ea1',
nv: '#016ea1',
ia: '#016ea1',
ca: '#016ea1',
or: '#016ea1',
nj: '#016ea1',
},
onRegionClick: function(element, code, region)
{
window.location = 'http://google.com/' + region;

},
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!!";
}
},
});
});


I tried using the code on the other topic with "onLabelShow" part however it just makes my tooltips disappear as a whole. Any solutions to this?

Thanks!

Links:
https://github.com/manifestinteractive/jqvmap (jqvMap documentation)
Custom Tooltips JQVMap (other topic)

hsh hsh
Answer

If you take a look at your browser console you'll see that states variable is not defined at all. if you want to prevent tool-tip from showing on states that are not exist, you need to define states,if not, just remove the first if statement. the onLabelShow should look likes this:

onLabelShow: function(event, label, code) {
        states =["fl","ma","md","wa","mn","ny","wi","hi","vt","nv","ia","ca","or","nj"];
        if (states.indexOf(code) <= -1) {
            event.preventDefault();
        } else if (label[0].innerHTML == "Colorado") {
            label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
        }
    },
});

You can find a working sample Here

hope that help.

Comments