Я делаю карту мира с всплывающей подсказкой, которая отображает данные, хранящиеся в каждом пути карты мира 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 для управления отображением данных?