不附加到html元素的Javascript工具提示

我正在使用ammap库创建一个网页来显示世界地图。我需要弹出一个工具提示，当用户点击一个国家，以显示一些链接等，用户可以互动的具体国家。Ammap为我提供了一个“onclick”事件，在该事件中，我可以获取我需要在工具提示中输入的所有信息，但我无法确切地知道如何做我想要的事情

我已经查看了tooltipster库，但似乎需要将工具提示附加到页面上的某个元素上，而我不能这样做，因为地图是由ammap库创建的

最好的方法是什么

谢谢

编辑：

单击地图区域时我实现的事件是：

map.addListener("clickMapObject", function (event) {
});

---

对于工具提示，我喜欢使用

display:none

html元素，对于对象的onclick事件，只需获取元素的偏移量，设置工具提示的

display:block并调整其在单击对象附近的偏移

<div id='tooltip'>tooltip</div>

这一切都取决于浏览器/客户端。下面是javascript函数的示例：

function tooltip(placeholder) {
var top = placeholder.offsetTop - 16;
var left = placeholder.offsetLeft + 16;
document.getElementById('tooltip').style.top = top;
document.getElementById('tooltip').style.left = left;
document.getElementById('tooltip').style.display="block";
}

对于本例，还需要onmouseout事件将工具提示的显示设置回无

我不认为这是最有效的示例，但它确实有效。
我创建了一个小示例，以便您可以了解如何处理元素单击事件的工具提示。我对所提到的库不太熟悉，但由于逻辑相似，请在给定的方法中复制粘贴下面代码段的内部

map.addListener("clickMapObject", function (event) {
    // place the snippet below in here ...          
});`

试试看

JavaScript

document.addEventListener('click', function(e) {

    e = e || window.event;
    var target = e.target || e.srcElement;

    if (target.className == 'killer') return false;

    var div = document.createElement('DIV');
    div.className = 'tooltip';
    div.innerHTML = 'This is a content within tooltip.';
    var span = document.createElement('SPAN');
    span.className = 'killer';
    span.innerHTML = 'X';
    span.onclick = function(){
        document.body.removeChild(this.parentNode);
    };
    div.appendChild(span);
    document.body.appendChild(div);
    div.style.left = e.clientX + document.body.scrollLeft + 'px';
    div.style.top = e.clientY + document.body.scrollTop + 'px'; 

}, false);

CSS

这是一个工作程序，您可以随意玩：）
您能分享一下这个库提供的
onclick
事件的代码吗
document.addEventListener('click', function(e) {

    e = e || window.event;
    var target = e.target || e.srcElement;

    if (target.className == 'killer') return false;

    var div = document.createElement('DIV');
    div.className = 'tooltip';
    div.innerHTML = 'This is a content within tooltip.';
    var span = document.createElement('SPAN');
    span.className = 'killer';
    span.innerHTML = 'X';
    span.onclick = function(){
        document.body.removeChild(this.parentNode);
    };
    div.appendChild(span);
    document.body.appendChild(div);
    div.style.left = e.clientX + document.body.scrollLeft + 'px';
    div.style.top = e.clientY + document.body.scrollTop + 'px'; 

}, false);

.tooltip {
  background-color:#555;
  width:200px;height:50px;
  z-index:99999;
  position:absolute;
}  

.killer {
  background-color:#fff;
  color:#555;
  cursor:pointer;
}