工具提示因前面的另一个重叠元素而闪烁

Question

我最好用图片描述我的问题：

我目前有一条虚线垂直线（基本上是一个div），它跟随光标跟在一个'mousemove'事件上，该事件绑定到包含条形图的div（带有黑色边框的框）。这有点来自这里的示例：Create dynamic vertical rule in d3

当我将鼠标悬停在包含的div上时，我还希望显示工具提示。虽然我可以做到这一点，每当我移动光标时工具提示都会闪烁，因为虚线会妨碍它背后的div '阻止'悬停触发器。

如果我将线的z-index更改为-1，则悬停触发器会正常触发，工具提示不会闪烁，但该线会落后于所有其他div，这不是我想要的视觉效果（如下所示 - 你可以看到工具提示正下方图像底部的两个点。

我如何发送'黑色边框'div后面的线条，以便我仍然能够看到它（就像在第一张图片中一样），但不要让它妨碍显示工具提示的悬停事件？

目前，我的垂直线CSS是：

.vertical-rule{
  width: 0px;
  height: 100%;
  position: absolute;
  border-right: 1px dotted #aaa;
  text-align: left;
  z-index: 1;
}