I am trying to implement Bootstrap Popover in jqueryVmap region click event.
jsFiddle with Default hello message :- http://jsfiddle.net/perlfanatic/KD6fm/6/
jsFiddle with "message" variable :- http://jsfiddle.net/perlfanatic/KD6fm/7/
I am trying to implement this http://jsfiddle.net/perlfanatic/KD6fm/7/ ie, message from jqvmap on popover.
Reference : https://github.com/manifestinteractive/jqvmap#dynamic-updating
Can someone please help me out. I am not javascript friendly user, I don't use it much, so please be kind on my javascript noobBrain.
<script type="text/javascript">
var message;
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',onRegionClick: function(element, region) {
var message = 'This Country is '
+ region;
},
});
jQuery(document).ready(function(){
jQuery('.jvectormap-region').popover({
placement: 'bottom',
container: 'body',
content: "Hello",
trigger: 'click'
})
});
</script>
Thanks
Is this what you were looking for? Changing the label?
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onLabelShow: function(event, label, code) {
label.text('This Country is '
+ label.text());
}
});
jQuery(document).ready(function(){
jQuery('.jqvmap-region').popover({
placement: 'bottom',
container: 'body',
content: message,
trigger: 'click'
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.