Displaying rollover balloon outside of chart area

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- first chart group -->
<div id="chartdiv"></div>
<div id="balloon" style="display: none;"></div>

CSS

body {
    font-family: Verdana;
    font-size: 11px;
}
#chartdiv {
	width		: 150px;
	height		: 50px;
	font-size	: 11px;
    margin: 100px;
        border: 1px dotted #c55;
}		
#balloon {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
    padding: 6px;
    font-size: 14px;
    color: #000;
    margin: 20px 0 0 20px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "autoMargins": false,
    "marginTop": 0,
    "marginRight": 0,
    "marginBottom": 0,
    "marginLeft": 0,
    "dataProvider": [{
        "country": "USA",
        "visits": 2025
    }, {
        "country": "China",
        "visits": 1882
    }, {
        "country": "Japan",
        "visits": 1809
    }, {
        "country": "Germany",
        "visits": 1322
    }, {
        "country": "UK",
        "visits": 1122
    }, {
        "country": "France",
        "visits": 1114
    }, {
        "country": "India",
        "visits": 984
    }, {
        "country": "Spain",
        "visits": 711
    }, {
        "country": "Netherlands",
        "visits": 665
    }, {
        "country": "Russia",
        "visits": 580
    }, {
        "country": "South Korea",
        "visits": 443
    }, {
        "country": "Canada",
        "visits": 441
    }, {
        "country": "Brazil",
        "visits": 395
    }],
    "valueAxes": [{
		"gridAlpha": 0,
        "axisAlpha": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "showBalloon": false,
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"		
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridAlpha": 0,
        "axisAlpha": 0,
        "labelsEnabled": false
    }
});

chart.addListener("rollOverGraphItem", function (event) {
    var b = document.getElementById("balloon");
    b.innerHTML = event.item.country + ": <b>" + event.item.values.value + "</b>";
    b.style.display = "block";
});

chart.addListener("rollOutGraphItem", function (event) {
    var b = document.getElementById("balloon");
    b.style.display = "none";
});

// For the clarity of code we're going to use jQuery to track mouse...