将qTip2与jQuery Vector Maps（jqvmap）结合使用

Question

我正在尝试禁用jqvmap中使用的默认工具提示，而要使用qTip2 。 反正有实现这一目标的方法吗？ 这是小提琴 。

jQuery代码：

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) {
        $("#jqvmap1_" + code).qtip({
            content: {
                text: code
            },
            position: {
                my: 'top left',
                    at: 'bottom right'
            }
        });
        event.preventDefault();
    }
});

Answer 1

JQVMap上的某些内容阻止了qTip2的正常工作，并且您说的更容易： “禁用默认工具提示” 。 我删除了onLabelShow并将showTooltip设置为false 。 然后将qtip直接添加到SVG路径中，从路径id提取国家代码：

$("path[id^='jqvmap11_']").each(function () {
    var $code = $(this).attr('id').replace('jqvmap1_', '');
    var $content = my_map_data[$code].name + ' | Data: ' + sample_data[$code];
    $(this).qtip({
        content: $content
    });
});

变量my_map_data包含文件jquery.vmap.world.js具有国家名称的国家路径对象。 我不得不调整文件，所以它将像：

/** Add World Map Data Points */
var my_map_data = {
    "id":{"path":"M781.etc.etc","name":"Indonesia"},
    "pg":{"path":"M852.etc.etc","name":"Papua New Guinea"},
    "mx":{"path":"M137.etc.etc","name":"Mexico"}, 
    /* etc */ 
};
jQuery.fn.vectorMap('addMap','world_en',{'width':950,'height':550,'pathes':my_map_data });

 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', }); $("path[id^='jqvmap1_']").each(function () { var $code = $(this).attr('id').replace('jqvmap1_', ''); var $content = my_map_data[$code].name + ' | Data: ' + sample_data[$code]; $(this).qtip({ content: $content, position: { target: 'mouse', adjust: { x: 0, y: 17 } }, style: { border: { width: 30, radius: 8, color: '#6699CC' }, } }); }); 

 .fiddle-header { background-color: #ccc; margin:0 0 10px 0; text-align: center; color: #fff; font-family: sans-serif; } .fiddle-header a { text-decoration: none; color: #eee } #vmap { width: 600px; height: 400px; } .jqvmap-label { position: absolute; display: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #292929; color: white; font-family: sans-serif, Verdana; font-size: smaller; padding: 3px; } .jqvmap-zoomin, .jqvmap-zoomout { position: absolute; left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #000000; padding: 3px; color: white; width: 10px; height: 10px; cursor: pointer; line-height: 10px; text-align: center; } .jqvmap-zoomin { top: 10px; } .jqvmap-zoomout { top: 30px; } .jqvmap-region { cursor: pointer; } .jqvmap-ajax_response { width: 100%; height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://jqvmap.com/js/vmap/jquery.vmap.js"></script> <!-- MODIFIED VERSION OF THE FILE jquery.vmap.world.js --> <script src="https://cdn.rawgit.com/brasofilo/8113470a8efef43968d4/raw/0b44a75c308f905b19667df9e712de09ff9c9ca1/jquery.vmap.world.js"></script> <script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.js"></script> <link href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet"/> <script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js"></script> <h3 class="fiddle-header">SO 21103404</h3> <div id="vmap"></div>