Html 在屏幕上的鼠标位置旁边设置组件位置

这是关于我先前提出的一个问题：

我想在鼠标指针旁边显示一个card div。我能够通过标记的方法实现它。该解决方案仅在我有一个独立映像时有效，但当我的页面上有其他组件时，card div位置会挂在映像之外

供进一步参考-

我怎样才能解决这个问题

$('area').mouseenter(function(e)
{
  const card = document.querySelector('.card');
  $(card).show();
  card.style.top = e.clientY+'px';
  card.style.left = e.clientX+'px';
  const def = $(this).attr('data-definition');
  $(".card-body").html(def);
});

$('area').mouseleave(function(e)
{
  const card = document.querySelector('.card');
  $(card).hide();
});