Tooltip Issue - HighMaps

Highmaps demo

by Darth Vader

HTML

<script src="https://rawgit.com/vinusv/examples/master/us-map.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/highcharts-4.1.6.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/highmaps-1.0.4.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/data-4.0.4.js"></script>
<!--<script src="http://code.highcharts.com/maps/highmaps.js"></script>-->
<!--<script src="http://code.highcharts.com/maps/modules/data.js"></script>-->
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(document).ready(function () {
    displayMap(usa_geojson);
});

function prepareData(mapData) {
    var data = [];
    $.each(mapData, function (index, element) {
        var hcKey = element["properties"]['hc-key'];
        var indexColor = Math.floor(Math.random() * (100)) + 1;
        data.push({
            "hc-key": hcKey,
            "value": indexColor
        });
    });
    return data;
}

function realignMapLabels(mapData) {
   // Process mapdata
    console.log("Map data being processeD", mapData);
    $.each(mapData, function () {
        var path = this.path,
            copy = {
                path: path
            };
		
        // This point has a square legend to the right
        if (path[1] === 9727) {
			this.hasBox = true;
            // Identify the box
            Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

            // Place the center of the data label in the center of the point legend box
            this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
            this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

        }
        // Tag it for joining
        this.ucName = this.name.toUpperCase();
    });
}

function displayMap(geojson) {
    // Prepare demo data
    var mapData = Highcharts.geojson(geojson);
    var data = prepareData(mapData);

    realignMapLabels(mapData);
    
    Highcharts.data({
        table: document.getElementById('data'),
        startColumn: 1,
        startRow: 1,
        complete: function (options) {
            $.each(options.series[0].data, function () {
                data.push({
                    ucName: this[0],
                    value: this[1]
                });
            });
        }
    });


     // Initiate the chart
    $('#container').highcharts('Map', {

        title: {
            text: 'Highmaps basic demo'
        },

        subtitle: {
            text: "<a...