CSS tooltip displaying behind text with one class and above text with another

Question

I'm using font-awesome to display an "icon" that, when hovered over, will display a tooltip. All of this is achieved using CSS.

When the tooltip is displayed above the item (.top class) everything works fine and the tooltip being displayed appears over top of the page text. However, when I display the tooltip below the item (.bottom class), the the tooltip is displayed but the font-awesome icons of the page appear over top of the tooltip.

I can't figure out why it works one way and not the other.

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  z-index:10;
}

.tooltip:before {
  content: attr(data-text);
  position: absolute;
  display: none;
  color: white;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 3px rgba(0,0,0,0.3);
  min-width: 400px;
  z-index:10;
}

.tooltip:after {
  content: "";
  position: absolute;
  border: 9px solid #000;
  display: none;
  z-index:10;
}

.tooltip:hover:before, .tooltip:hover:after{
    display: block;
}

.tooltip.right:before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 15px;
}

.tooltip.right:after {
  border-color: transparent blue transparent transparent;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
}

.tooltip.bottom::before {
  top: 80%;
  margin-top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom::after {
  border-color: transparent transparent blue transparent;
  top: 80%;
  transform: translateX(-50%);
  left: 50%;
}

.tooltip.top::before {
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
  min-width: 350px;
}

.tooltip.top::after {
  border-color: blue transparent transparent transparent;
  bottom: 80%;
  transform: translateX(-50%);
  left: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <div>
    Tooltip Top 1 <span class="tooltip top" data-text="this is tip one."><i class="fas fa-question-circle"></i></span>
  </div>
  <div>
    Tooltip Bottom 1 <span class="tooltip bottom" data-text="this is tip two."><i class="fas fa-question-circle"></i></span>
  </div>
  <div>
    Tooltip Bottom 2 <span class="tooltip bottom" data-text="this is tip one."><i class="fas fa-question-circle"></i></span>
  </div>
  <div>
    Tooltip Top 2 <span class="tooltip top" data-text="this is tip two."><i class="fas fa-question-circle"></i></span>
  </div>
</div>
<i class="fas fa-question-circle"></i>