main>.container {
  padding: 60px 15px 0;
}


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

.tooltipp:before {
  content: attr(data-text);
  /* here's the magic */
  position: absolute;

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

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

  /* basic styles */
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-align: center;

  display: none;
  /* hide by default */

  opacity: 0;
  transition: .3s opacity;
}

.tooltipp:hover:before {
  display: block;
  opacity: 1;
}


.tooltipp:after {
  opacity: 0;
  transition: .3s;
}

.tooltipp:hover:after {
  opacity: 1;
}