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 <br> or something so it doesn't look as bad
I have tried
var countryName = $(this).attr("title");
var capitalName = $(this).attr("data-capital");
$(".tooltip").html(countryName + <?php <br> ?> + capitalName);
basically trying to add the <br> 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.
The jQuery
$(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 + <?php <br> ?> + capitalName);
$('.tooltip').css({top: top,left: left}).show();
//console.log (left, top);
});
$('path').mouseout(function() {
$('.tooltip').hide();
});
});
One of the paths
<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"/>
The tooltip
<div class="tooltip">
</div>
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?
