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

.fc-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: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-align: center;

  display: none; /* hide by default */

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

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

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

.fc-tooltip.right:before {
  /* reset defaults */
  right: initial;
  margin: initial;

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

.fc-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 #000;
  border-color: transparent black transparent transparent;

  display: none;

  opacity: 0;
  transition: .3s;
}

.fc-tooltip:hover:before,
.fc-tooltip:hover:after {
  display: block;
  opacity: 1;
}