带有Bootstrap弹出内容的jQueryvmap

jQueryvmap with Bootstrap Popover Content

本文关键字：jQueryvmap Bootstrap 带有      更新时间：2023-09-26

我正试图在jqueryVmap区域点击事件中实现Bootstrap Popover。

jsFiddle带有默认的hello消息：-http://jsfiddle.net/perlfanatic/KD6fm/6/

jsFiddle与"；消息"；变量：-http://jsfiddle.net/perlfanatic/KD6fm/7/

我正在努力实现这一点http://jsfiddle.net/perlfanatic/KD6fm/7/即来自popover上的jqvmap的消息

参考：https://github.com/manifestinteractive/jqvmap#dynamic-更新

有人能帮帮我吗？我不是一个对JavaScript友好的用户，我不怎么使用它，所以请友善一点。

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

这就是您想要的吗？更改标签？

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'
            })
        });
相关文章：