.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
 /* border-bottom:1px dashed currentColor;*/ /* little indicater to indicate it's hoverable */
  margin-left:10px;
  cursor: pointer;
  background: #288f8f;
  color: #fff;
  padding: 5px;
  font-weight: bold;
  border-radius: 5px;
}
.tooltip: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:0;
  height:0;
  padding:10px;
  border-radius:10px;
  background:#4E8098;
  color: #fff;
  text-align:center;
  font-weight: 300;
  font-size: 12px;

  opacity:0;
  transition:.3s opacity;   
}
.tooltip:after {
  content: "";
  position:absolute;
  
  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;
 
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
 
  /* the arrow */
  border:10px solid #4E8098;
  border-color: transparent #4E8098 transparent transparent;
  
  opacity:0;
  transition:.3s opacity;   
}
.tooltip:hover:before {
  opacity:1;
  width:200px;
  height:auto;
}
.tooltip:hover:after {
  opacity:1;
  height:auto;
}

.tooltip.left:before {
  /* reset defaults */
  left:initial;
  margin:initial;

  /* set new values */
  right:100%;
  margin-right:15px;
}