简体   繁体   中英

jQueryvmap with Bootstrap Popover Content

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?

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

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM