Create a social media Tooltip

Question

I have put the social media icons in my footer as a "follow me" section. Now I would like to have a tooltip like this here https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom where each one would pop up with a text "facebook", "Twitter", etc.

How do I achieve this with what I already have since I don't want to mess up my footer and my social media icons while attempting this. Is there a way to squeeze the <span class="tooltiptext"> in? Or use this as an id tag? I was thinking of trying something like this for example.

<a href="#" class="fa fa-facebook" id="tooltiptext"></a>

Is this possible?

Any tips and tricks would be much appreciated. Feel free to run the code snippet to see what my social media icons look like at the moment.

/* Footer aka a copyright + social media pages */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  /* Height of the footer */
  background-color: #b3b3ff;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-snapchat {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
  <div class="tooltip">

    <!-- Now where should I place "tooltiptext" -->

    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-linkedin"></a>
    <a href="#" class="fa fa-instagram"></a>
    <a href="#" class="fa fa-snapchat"></a>
  </div>
</div>