CSS-如何定位内容数据标题

在我的jsfiddle中，我有11个图表，每个图表都有一个工具提示，显示悬停在图标元素上。但在有长标题文本的图表上，如果你向下滚动问题后面显示的示例，你可以看到，有很多文本的工具提示会跳出框。我想知道如何正确定位它，使它始终位于工具提示框内。

你可以在这里看到这个例子。

这是我的css文件：

@import "settings";
@import "foundation";
@include foundation-grid;
@include foundation-global-styles;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-breadcrumbs;
@include foundation-table;
html, body {
  height: 100%;
}
// The grid is flex
body {
  display: flex;
}
.content {
  flex: 1;
}
section.article {
}
// .rows needs paddings in Panda
.row {
  padding: 0.5rem 0;
}
// We override Zurb foundation breadcrumbs here
ul.breadcrumbs li.disabled {
  color: $primary-color;
}
ul.breadcrumbs li  a {
  color: #0D47A1;
  text-decoration: underline;
}
ul.breadcrumbs li.current a {
}
ul.breadcrumbs li:not(:last-child)::after {
  color: #222;
  content: ">";
}
// Default table styles are a bit large for big data sets
table {
  font-size: .9rem;
}
 // Panda button and link styles
a.tertiary {
  background: none;
  text-decoration: underline;
  margin-left: 1.5rem;
}
// Special form styles where large datasets are presented
fieldset.bedrift {
  .column {
  margin: 0 0 1rem 0;
  }
  input {
    margin: 0;
  }
}
// Styles for reports
#graphs {
  .row {
    margin-bottom: 2rem;
  }
  .description p {
    padding-top: 2rem;
    font-size: 0.8rem;
  }
}
#detaljer {
  .row {
    margin-bottom: 1.5rem;
  }
  h3 {
    margin-bottom: 1rem;
  }
  td {
    font-size: 0.8rem;
  }
}
// Styles for the helper
#helper {
  background: #ECEFF1;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 1000;
  &:hover {
    background: darken(#ECEFF1,10);
    transition: background 0.2s ease;
  }
}
#list1, #list2 {
  background-image: none;
}
//help tooltip
.has-tip{
  position: relative;
}
.has-tip:after {
  display: none;
  left: 100px;
  width:300px;
  box-sizing: border-box;
  font-size: .7em;
  content: attr(data-title);
  position: absolute;
  background: rgba(249, 249, 249, 0.85098);
  border: 1px solid rgb(124, 181, 236);
  padding: 5px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  z-index: 1000;
}
.has-tip:hover:after {
  display: block;
  z-index: 1000;
}