Saya menyadari bahwa topik tip alat kustom jqvMap lainnya sudah dijawab, namun solusi itu tidak berhasil untuk saya.
Ini kode jqvMap saya saat ini untuk 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!!";
}
},
});
});
Saya mencoba menggunakan kode pada topik lain dengan bagian "onLabelShow" namun itu hanya membuat tooltips saya hilang secara keseluruhan. Ada solusi untuk ini?
Terima kasih!
Tautan: https://github.com/manifestinteractive/jqvmap (dokumentasi jqvMap) Custom Tooltips JQVMap (topik lain)
1 menjawab
Jika Anda melihat konsol browser Anda, Anda akan melihat bahwa variabel states tidak ditentukan sama sekali. jika Anda ingin mencegah tool-tip muncul pada status yang tidak ada, Anda perlu mendefinisikan states, jika tidak, hapus saja pernyataan if pertama. onLabelShow akan terlihat seperti ini:
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 == "Florida") {
label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
}
},
});
Anda dapat menemukan contoh yang berfungsi Di sini
Berharap bantuan itu.