计算元素的总scrollTop和scrollLeft

Question

当我将鼠标悬停在元素上时，我想显示一个工具提示。工具提示必须位于位置：固定； z：索引：1 或它不会出现在我正在使用的软件的其他面板上方。问题在于位置：固定，如果页面上有任何活动的滚动，则相对于我的原始元素，工具提示不会出现在正确的位置。

我尝试计算元素的父元素之一上的滚动量，并使用JQuery在元素的位置中对付滚动量：

$( '.tooltipContainer' ).mouseenter( function(){
	var scrollX = $('.elementWithScrollBar').scrollLeft();
	var scrollY = $('.elementWithScrollBar').scrollTop();
	$( '.tooltip' ).css({
    'margin-left':'-=' + scrollX,
    'margin-top':'-=' + scrollY
  });
});
$( '.tooltipContainer' ).mouseleave( function(){
	var scrollX = $('.elementWithScrollBar').scrollLeft();
	var scrollY = $('.elementWithScrollBar').scrollTop();
	$( '.tooltip' ).removeAttr('style');
});

.elementWithScrollBar {
  background-color: gray;
	height: 100px;
	margin: 30px;
	overflow: scroll;
	width: 400px;
}
.tooltipContainer {
	display: inline-block;
  font-size: 50px;
	position: relative;
	vertical-align: top;
	width: 500px;
}
.tooltip {
	box-sizing: border-box;
	background-color: #FFFFFF;
	color: #000000;
	border-radius: 4px;
	border: 1px solid #CC0000;
	display: none;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	margin-top: 5px;
	padding: 5px;
	position: fixed;
	text-align: center;
	width: 300px;
	z-index: 1;
}
.tooltipContainer:hover .tooltip {
	display: block;
}
.box {
  background-color: white;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DIV class="elementWithScrollBar">
  <DIV class="tooltipContainer">
    Hover over me
    <SPAN class="tooltip">
      The tooltip should follow the text
    </SPAN>
  </DIV>
  <DIV class="box">
  </DIV>
</DIV>

我不确定定义scrollLeft和scrollTop以及在mouseenter和mouseleave上添加或减去它们是否是解决我的问题的最佳方法，但是它可以在简单的情况下使用（尽管可以提供任何建议）。

我的问题是我的元素有很多父级，并且所有这些父级都可能具有滚动组件。有没有一种方法可以将元素的所有父元素的所有scrollTop和scrollLeft值相加，以便我可以准确确定工具提示的放置位置？