Javascript-форум - Не выводит JSON в tooltip

Здравствуйте, скриптеры. У меня задание: сделать сайт о погоде, и я хочу чтобы при наведении в конкретной точке изображения отображались данные о погоде конкретного города (Melbourne в моем случае).

И получается так, что если я погоду вывожу в подсказке она не отображается, если за территорией подсказки - то отображается.

<!DOCTYPE html>
<html>
    <head>
        <title>Travel with weather</title>
        <meta charset="utf-8">

        <link rel="stylesheet" href="css/main.css">

    <script src="http://ruseller.com/lessons/les1310/demo/jquery-1.6.3.min.js"></script>
    <script src="js/tips.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

<body>

    <div id="wrapper">
       <img style="max-width: 100%; height: auto;" width="100%" height="100%" src="http://www.cyberforum.ru/images/weather-world-map.png" alt="Weather map">

       <div class="pin pin-down" data-xpos="1100" data-ypos="510">    
          <h2>Канберра</h2>   
<table>
      <tr>
       <th>Сегодня</th><th>Завтра</th><th>Послезавтра</th>
       </tr>
        <tr>
        <td id="tempToday"></td><td id="tempTomorrow"></td><td id="tempAfterTomorrow"></td>
         </tr>
        </table>

       </div>
    </div>



</body>
</html>

Сам вывод погоды (index.js):

$(function() {
$.getJSON('http://api.openweathermap.org/data/2.5/forecast/daily?q=Melbourne' + 
          '&units=metric&cnt=3&appid=2de143494c0b295cca9337e1e96b00e0', 
    function(data) {
        $('#tempToday').html(data.list[0].temp.day);
        $('#tempTomorrow').html(data.list[1].temp.day);
        $('#tempAfterTomorrow').html(data.list[2].temp.day);
        $('#pressureToday').html(data.list[0].pressure);
        $('#pressureTomorrow').html(data.list[1].pressure);
        $('#pressureAfterTomorrow').html(data.list[2].pressure);
        $('#iconToday').html('<img src="http://www.cyberforum.ru/images/'+ data.list[0].weather[0].icon + '.png" alt="Weather icon">');
        $('#iconTomorrow').html('<img src="http://www.cyberforum.ru/images/'+ data.list[1].weather[0].icon + '.png" alt="Weather icon">');
        $('#iconAfterTomorrow').html('<img src="http://www.cyberforum.ru/images/'+ data.list[2].weather[0].icon + '.png" alt="Weather icon">');
    }
);

});

вывод подсказок (tips.js):

$(document).ready(function(){

        // set the width and height of a container in accordance with the size of the image
        $('#wrapper').css({'width':$('#wrapper img').width(),
                          'height':$('#wrapper img').height()
        })

        // direction symbol tips
        var tooltipDirection;

        for (i=0; i<$(".pin").length; i++)
        {               
            // set the direction of the character tips - up or down
            if ($(".pin").eq(i).hasClass('pin-down')) {
                tooltipDirection = 'tooltip-down';
            } else {
                tooltipDirection = 'tooltip-up';
                }

            // add tip
            $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                                                <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
                                        </div>");
        }    

        // show/hide tips
        $('.tooltip-up, .tooltip-down').mouseenter(function(){
                    $(this).children('.tooltip').fadeIn(100);
                }).mouseleave(function(){
                    $(this).children('.tooltip').fadeOut(100);
                })
    });

Подскажите пожалуйста, буду очень благодарен!