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

Question

在我的 jsfiddle 中，我有 11 个图表，每个图表都有一个工具提示，当鼠标悬停在图标元素上时会显示该提示。但是在有很长标题文本的图表上，如果您向下滚动问题后面显示的示例，您可以看到，带有大量文本的工具提示会被开箱即用。我想知道如何正确定位它，使其始终位于工具提示框内。

可以看例子here .

这是我的 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;
}

Answer 1

您的工具提示的固定宽度为 300 像素，如果文本超过此长度，将无法容纳。

解决这个问题的最简单方法是将 white-space: pre-wrap; 添加到您的 CSS .has-tip:after