jQueryvmap with Bootstrap Popover Content

Question

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/ i.e., 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.

<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>

Answer 1

Is this what you were looking for? Changing the label?

http://jsfiddle.net/KD6fm/25/

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'
            })
        });