.infotip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  /*border-bottom:1px dashed #000;*/ /* little indicater to indicate it's hoverable */
}

.infotip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  /*white-space: pre-wrap;*/
  white-space: pre;

  /* vertically center */
  top:0%;
  transform:translateY(-10%);

  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */

  /* basic styles */
  min-width:350px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
  font-size:0.875em;
  z-index: 1000;

  display:none; /* hide by default */
}

.infotip:hover:before {
  display:block;
}

.infotip:after {
  content: "";
  position:absolute;

  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;

  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* the arrow */
  border:10px solid #000;
  border-color: transparent black transparent transparent;

  display:none;
}
.infotip:hover:before, .helptip:hover:after {
  display:block;
}