Using qTip2 with jQuery Vector Maps (jqvmap)

问题

I am trying to disable the default tool tip used in jqvmap and want to use qTip2 instead. Is there anyway to achieve this? Here is the fiddle.

jquery code:

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

回答1:

Something on JQVMap is blocking qTip2 from working and it's easier to do just what you say: "disable the default tooltip". I've removed onLabelShow and set showTooltip to false. Then added qtip directly into the SVG paths, extracting the country code from the path 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
    });
});

The variable my_map_data contains the country path objects from the file jquery.vmap.world.js with the country names. I had to adapt the file so it will be like:

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

来源：https://stackoverflow.com/questions/21103404/using-qtip2-with-jquery-vector-maps-jqvmap