Как взять две части данных из пути svg и отобразить их в другом div, используемом в качестве всплывающей подсказки?

Я делаю карту мира с всплывающей подсказкой, которая отображает данные, хранящиеся в каждом пути карты мира SVG. Используя jQuery, я могу отображать эти данные, но проблема, с которой я сталкиваюсь, заключается в том, как объединить две отдельные части данных и добавить <br> или что-то, чтобы это не выглядело так плохо

я пытался

var countryName = $(this).attr("title");
var capitalName = $(this).attr("data-capital");

$(".tooltip").html(countryName + <?php <br> ?> + capitalName);

в основном пытается добавить <br> внутри php, но когда я делаю это, ничего не отображается. Если я уберу это, обе части будут отображаться, но прямо рядом друг с другом, и я хочу, чтобы они были в отдельных строках. Также этот скрипт находится внутри html-файла.

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();
});

});

Один из путей

<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"/>

Подсказка

<div class="tooltip">
</div>

Поэтому в основном мой вопрос заключается в том, как я могу заставить эту работу работать так, чтобы я мог отображать несколько частей атрибутов данных в подсказке и иметь возможность добавлять к ним html? Или я должен добавить элементы в div.tooltip, чтобы управлять отображением данных?