title: add more information on the info box, Maps with SVG and jQuery
body: <p>In the tutor "Dynamic Geo Maps with SVG and jQuery", I want to add more information on the info box by using <code>&lt;br&gt;</code>, but then the info box disappears. Please see the example below.  </p>
  
  <p><a href="http://codepen.io/SitePoint/pen/KDHfh" rel="nofollow noreferrer">http://codepen.io/SitePoint/pen/KDHfh</a></p>
  
  <pre><code>$(function() {
  
  for(i = 0; i &lt; regions.length; i++) {
  
      $('#'+ regions[i].region_code)
      .css({'fill': 'rgba(11, 104, 170,' + regions[i].population/highest_value +')'})
      .data('region', regions[i]);
  }
  
  $('.map g').mouseover(function (e) {
      var region_data=$(this).data('region');
      $('&lt;div class="info_panel"&gt;'+
          region_data.region_name + '&lt;br&gt;' +
          'Test: ' + region_data.test + '&lt;br&gt;' +
          'Population: ' + region_data.population.toLocaleString("en-UK") +
          '&lt;/div&gt;'
       )
      .appendTo('body');
  })
  .mouseleave(function () {
      $('.info_panel').remove();
  })
  .mousemove(function(e) {
      var mouseX = e.pageX, //X coordinates of mouse
          mouseY = e.pageY; //Y coordinates of mouse
  
      $('.info_panel').css({
          top: mouseY-50,
          left: mouseX - ($('.info_panel').width()/2)
      });
  });
  
  });
  </code></pre>