时间戳

首页 > 解决方案 > 如何从 svg 路径中​​获取两条数据并将它们显示在另一个用作工具提示的 div 中？

php - 如何从 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 中添加元素来操纵数据的显示方式？

标签： phpjquerytooltip

解决方案

推荐阅读