使用qTip2和jQuery矢量地图（jqvmap）

我试图禁用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; } 

        
SO 21103404