JSFiddle - React, Tailwind, and code Playground

tooltipsy with jqvmap

by brasofilo

HTML

<script src="http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js?v=1.0"></script>
<script src="https://rawgit.com/briancray/tooltipsy/master/tooltipsy.min.js"></script>
<h3 class="fiddle-header"><a href="http://stackoverflow.com/questions/21103404/using-qtip2-with-jquery-vector-maps-jqvmap">SO 21103404</a></h3>

<div id="vmap"></div>
<!-- FOLLOWS A MODIFIED VERSION OF THE FILE jquery.vmap.world.js -->
<!-- I've added it here so the JS box keeps clean -->
<!-- . . . . . . . . . . . . . . . . . -->
<script>
    /** Add World Map Data Points */
    var my_map_data = {
        "id": {
            "path":...

CSS

.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
}
.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}
/*!
 * jQVMap Version 1.0 
 *
 * http://jqvmap.com
 *
 * Copyright 2012, Peter Schmalfeldt <[email protected]>
 * Licensed under the MIT license.
 *
 * Fork Me @ https://github.com/manifestinteractive/jqvmap
 */
 #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;
}

JavaScript

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).tooltipsy({
        content: $content,
        alignTo: 'cursor',
        offset: [-10, 0],
        show: function (e, $el) {
            $el.css({
                'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
                    'opacity': '0.0',
                    'display': 'block'
            }).animate({
                'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
                    'opacity': '1.0'
            }, 300);
        },
        hide: function (e, $el) {
        $el.animate({
            'top': '-=50px',
            'opacity': '0.0'
        }, 300);
        }
    });
});