title: How to take two pieces of data from an svg path and display them in another div used as a tooltip?
body: <p>I am making a world map with a tool-tip that displays data stored in each path of the SVG world map. Using jQuery I am able to display that data, but the issue I am running into is how to combine two separate pieces of data and add a <code>&lt;br&gt;</code> or something so it doesn't look as bad</p>
  
  <p>I have tried </p>
  
  <pre><code>var countryName = $(this).attr("title");
  var capitalName = $(this).attr("data-capital");
  
  $(".tooltip").html(countryName + &lt;?php &lt;br&gt; ?&gt; + capitalName);
  </code></pre>
  
  <p>basically trying to add the <code>&lt;br&gt;</code> inside php, but when I do this nothing displays. If I remove that both pieces display but directly next to each other and I want them on separate lines. Also this script is inside of the html file.</p>
  
  <p>The jQuery</p>
  
  <pre><code>$(document).ready(function(){
  $('path').mousemove(function(event) { 
      var left = event.pageX + 15;
      var top = event.pageY;
      var countryName = $(this).attr("title");
      var capitalName = $(this).attr("data-capital");
      $(".tooltip").html(countryName + &lt;?php &lt;br&gt; ?&gt; + capitalName);
      $('.tooltip').css({top: top,left: left}).show();
      //console.log (left, top);
  });
  $('path').mouseout(function() {
      $('.tooltip').hide();
  });
  </code></pre>
  
  <p>});</p>
  
  <p>One of the paths</p>
  
  <pre><code>&lt;path id="AD" title="Andorra" data-capital="Capital: " class="land" d="M480.487,331.376L480.41,331.401L480.152,331.556L480.005,331.61L479.871,331.637L479.766,331.626L479.708,331.535L479.714,331.396L479.69,331.272L479.67,331.205L479.708,331.024L479.794,330.927L479.913,330.847L480.101,330.876L480.499,330.992L480.582,331.101L480.583,331.173L480.51,331.292z"/&gt;
  </code></pre>
  
  <p>The tooltip</p>
  
  <pre><code>&lt;div class="tooltip"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically my question is how can I make this work where I can display multiple pieces of data attributes into the tooltip and be able to add html to them? Or should I add elements inside the div.tooltip to manipulate how the data is displayed?</p>