CSS - how to position content data-title

问题:

In my jsfiddle I have 11 charts, and each of them has a tooltip that shows on hover over icon element. But on charts where there is a long title text, which you can see if you scroll down on the example shown later in the question, tooltip that has a lot of text goes out of the box. I wonder how to position it properly so that it is always inside of of the tooltip box.

You can see the example here.

This is my css file:

@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;
}

回答1:

Your tooltip has a fixed width of 300px wich will not fit if the text is longer than this.

The easiest way to fix that is to add white-space: pre-wrap; to your CSS .has-tip:after

回答2:

Try to remove width:300px; in .has-tip:after. It will not work properly in fiddle. Or add white-space: pre-wrap; in it.