html {
    background-color: gray;
}



/* CUSTOM TOOLTIP POPUPS ---------------------------------------------- */
.tooltip {
    position:relative; /* Creates bounding box for tooltip popup */
} 

.tooltip:before { /* TOOLTIP MAIN BOX */
    content: attr(data-text); /* Grabs text from 'data-text' on element */
    position:absolute;
    left:50%; /* horizontally center */
    transform: translateX(-50%);
    top: 100%; /* move to bottom and add padding */
    margin-top: 10px;
    width:200px; /* styling */
    padding:10px;
    border-radius:15px;
    background:#000;
    color: #fff;
    text-align:center;
    opacity:0; /* Hides by default, animated fade in */
    transition:.4s opacity;
}

.tooltip:after { /* TOOLTIP ARROW BIT */
    content: "";
    position:absolute;
    /* position tooltip correctly */
    top:100%;
    margin-top: -10px;
    /* vertically center */
    left:50%;
    transform:translateX(-50%);
    /* the arrow */
    border:10px solid #000;
    border-color: transparent transparent black transparent;
    opacity:0;
    transition:.4s opacity;
  }

  .tooltip:hover:before, .tooltip:hover:after { /* TOOLTIP DISPLAY ON HOVER */
    display:block;
    opacity:1;
  }