滚动页面时Toggletip正在移动

Question

我有toggleTip。当我在网页中选择任何字符串时，应该显示一个切换提示。对于整个页面具有单个div的页面以及可滚动性，当我滚动时它也可以正常工作。但是对于像gmail或任何邮件窗口这样的页面，此时特定div（而不是整个页面）div具有滚动能力，切换提示将远离所选字符串。可以请我出来吗？

下面是说明问题的图像：

当我单击切换提示时，位于所选字符串旁边

当我在同一页面中滚动时，toogletip正在移动

.toolTipContainer {
  text-decoration: none !important;
  text-align: center !important;
  color: #0073C4 !important;
  display: inline-block !important;
  position: absolute !important;
  background: #F1F3F5 !important;
  padding: 8px !important;
  line-height: 12px !important;
  z-index: 500;
  border: 1px solid #cccc !important;
  box-shadow: 2px -2px 4px 0 rgba(0, 0, 0, 0.5) !important;
}

.highlight a:hover {
  text-decoration: underline !important;
  color: #164794 !important;
  text-align: center !important;
  display: inline-block !important;
  position: absolute !important;
  background: #F1F3F5 !important;
  padding: 8px !important;
  line-height: 12px !important;
  z-index: 500;
  border: 1px solid #cccc !important;
  box-shadow: 2px -2px 4px 0 rgba(0, 0, 0, 0.5) !important;
}

<div className={styles.highlight} style={toggletipDisplay}>
  <a className={styles.toggleTipContainer} style={toggletipStyle}>
    "example"
  </a>
</div>