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

在我的JSFIDLE中，我有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;
}

---

工具提示的固定宽度为300px，如果文本长度超过此值，则该宽度将不合适

---

最简单的修复方法是添加

空白：预包装到你的CSS
。有提示：在
之后尝试删除宽度：300px；在。有提示：之后。它在小提琴中不能正常工作。
或添加空白：预换行；在里面。
谢谢，就这样！是否还有一种方法可以将工具提示显示在图表外部，因为现在我需要将其放置在图表内部，以便在悬停时可见，我想知道如何做到这一点，因为我已经尝试使用z-index:1000来实现这一点，但显然不是这样。我认为如果从“#highcharts container”中删除溢出：隐藏，则可以实现这一点