.tooltip
  {
  position: relative;
  }

/* Tooltip text */
.tooltip .tooltiptext
  {
  visibility: hidden;
  width: 300px;
  background-color: #FFFFFF;
  padding: 12px 16px 12px 16px;
  border-radius: 8px;
  border: 0;
  box-shadow:0 0 5px #888888;
  position: absolute;
  z-index: 1000;

  top: 100%;
  left: 50%;
  margin: 10px 0 0 -170px;
  }

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 163px;
    margin: 10px 0 0 0;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #FFFFFF transparent;
}

/* Show the tooltip text when you mouse over the tooltip container
.tooltip:hover .tooltiptext {
    visibility: visible;
}
*/